/*
Theme Name: ちょうどいいweb屋さん
Theme URI: https://chodoii-web.com/
Author: ちょうどいいweb屋さん
Description: 小規模事業者・個人事業主・フリーランス向けWeb支援「ちょうどいいweb屋さん」のコーポレートサイト＋ブログ用テーマ。誌面・青のデザイン。
Version: 1.3.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chodoii
*/

/* ============================================================
   基本リセット・変数
   ============================================================ */
:root{
  --ink:#1c1b18;
  --ink-sub:#33312a;
  --ink-sub2:#4a473d;
  --muted:#6f6a60;
  --paper:#fbfaf7;
  --paper2:#f3f3f0;
  --rule:#e4e0d8;
  --blue:#2746b8;
  --navy:#1b2d6b;
  --lightblue:#eef1fb;
  --gothic:'Zen Kaku Gothic New',sans-serif;
  --mincho:'Shippori Mincho',serif;
  --latin:'EB Garamond',serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden !important;}
.cw-site{overflow-x:clip;}
/* WordPress管理バーのdisplay-nameスパンが右に飛び出す問題を修正 */
#wpadminbar{overflow-x:hidden !important;max-width:100vw !important;}
#wpadminbar .display-name{display:none !important;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;}
a{color:inherit;}
.cw-skip-link{position:absolute;left:-9999px;}

/* 中央カラム（最大幅） */
.cw-site{max-width:1240px;margin:0 auto;background:var(--paper);}

details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}

@keyframes floatUp{from{transform:translateY(22px);opacity:.001;}to{transform:none;opacity:1;}}
@keyframes lbFade{from{opacity:0;}to{opacity:1;}}
@keyframes lbPop{from{opacity:0;transform:scale(.965);}to{opacity:1;transform:none;}}

/* スクロールで出現（IntersectionObserver） */
[data-reveal]{opacity:0;transform:translateY(22px);}
[data-reveal].is-in{animation:floatUp .8s cubic-bezier(.2,.65,.2,1) both;opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;animation:none !important;}
}

/* FAQ 開閉マーカー */
.cw-faq summary .cw-faq-mark::after{content:"＋";}
.cw-faq[open] summary .cw-faq-mark::after{content:"−";}

/* ============================================================
   記事本文（the_content / Gutenberg）の体裁
   ============================================================ */
.cw-entry{max-width:720px;margin:0 auto;padding:46px 64px 8px;}
.cw-entry > *{margin-left:auto;margin-right:auto;}
.cw-entry p{
  font:400 16.5px/2.15 var(--gothic);
  color:var(--ink-sub);
  margin:0 0 28px;
}
.cw-entry h2{
  font:700 25px/1.6 var(--gothic);
  color:var(--ink);
  margin:44px 0 18px;
  padding-left:16px;
  border-left:4px solid var(--blue);
}
.cw-entry h3{
  font:700 20px/1.6 var(--gothic);
  color:var(--ink);
  margin:36px 0 14px;
}
.cw-entry h4{font:700 17px/1.6 var(--gothic);color:var(--ink);margin:28px 0 12px;}
.cw-entry a{color:var(--blue);text-underline-offset:3px;}
.cw-entry strong{font-weight:700;}
.cw-entry img,.cw-entry figure{max-width:100%;height:auto;margin:32px 0;}
.cw-entry figure img{margin:0;}
.cw-entry figcaption{font:400 12px/1.7 var(--latin);color:var(--muted);text-align:center;margin-top:10px;}
.cw-entry blockquote{
  margin:36px 0;
  padding:24px 28px;
  background:var(--lightblue);
  border-left:4px solid var(--blue);
}
.cw-entry blockquote p{
  font:500 18px/1.9 var(--mincho);
  color:var(--navy);
  margin:0;
}
.cw-entry ul,.cw-entry ol{
  margin:0 0 28px;
  padding:0 0 0 4px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  counter-reset:cw-ol;
}
.cw-entry ul li,.cw-entry ol li{
  font:400 15.5px/1.8 var(--gothic);
  color:var(--ink-sub);
  padding-left:30px;
  position:relative;
}
.cw-entry ul li::before{
  content:"›";
  position:absolute;left:6px;top:0;
  color:var(--blue);font-weight:700;
}
.cw-entry ol li{counter-increment:cw-ol;}
.cw-entry ol li::before{
  content:counter(cw-ol);
  position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;
  background:var(--blue);color:#fff;
  font:700 11px/20px var(--gothic);
  text-align:center;
}
.cw-entry table{border-collapse:collapse;width:100%;margin:0 0 28px;font:400 14.5px/1.8 var(--gothic);}
.cw-entry th,.cw-entry td{border:1px solid var(--rule);padding:12px 14px;text-align:left;}
.cw-entry th{background:var(--lightblue);font-weight:700;}

/* ============================================================
   ページネーション（WPデフォルト出力を四角スタイルに）
   ============================================================ */
.cw-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:52px 0 0;}
.cw-pagination .page-numbers{
  display:grid;place-items:center;
  width:40px;height:40px;
  font:600 14px/1 var(--latin);
  color:var(--ink-sub);
  text-decoration:none;
  border:1px solid #cdd2c2;
  background:var(--paper);
}
.cw-pagination .page-numbers.current{
  color:#fff;background:var(--blue);border-color:var(--blue);
}
.cw-pagination .page-numbers.dots{border:none;background:none;}
.cw-pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);}

/* 記事タイトル: 長い日本語タイトルがスマホ幅ではみ出さないようにする */
.cw-h1{
  max-width:100% !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  line-break:strict;
}
.cw-breadcrumb{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.cw-breadcrumb-current{
  overflow-wrap:anywhere;
  word-break:break-all;
}

/* ============================================================
   レスポンシブ（〜960px / 〜600px）
   ============================================================ */
@media (max-width:960px){
  .cw-pad{padding-left:28px !important;padding-right:28px !important;}
  .cw-grid-2,.cw-grid-3,.cw-grid-4{grid-template-columns:1fr !important;}
  .cw-hero-grid{grid-template-columns:1fr !important;gap:36px !important;}
  .cw-label-grid{grid-template-columns:1fr !important;gap:14px !important;}
  .cw-services-row{grid-template-columns:1fr !important;}
  .cw-services-row > article{border-right:none !important;border-bottom:1px solid var(--rule) !important;padding:32px 0 !important;}
  .cw-feature-article{grid-template-columns:1fr !important;gap:24px !important;}
  .cw-h1{font-size:40px !important;}
  .cw-entry{padding-left:28px !important;padding-right:28px !important;}
  /* トップページ: ABOUTとFAQのラベル横並びグリッドをモバイルで縦積みに */
  section#about,section#faq{display:block !important;}
}
@media (max-width:600px){
  .cw-nav-links{display:none !important;}
  .cw-menu-toggle{display:flex !important;}
  .cw-masthead{display:none !important;}
  .cw-masthead,.cw-header,.cw-section{padding-left:20px !important;padding-right:20px !important;}
  .cw-h1{
    width:100% !important;
    max-width:calc(100vw - 48px) !important;
    font-size:30px !important;
    line-height:1.55 !important;
  }
  .cw-hero-title{font-size:40px !important;}
  .cw-footer-grid{grid-template-columns:1fr !important;gap:32px !important;}
  .cw-contact{grid-template-columns:1fr !important;gap:28px !important;}
}
@media (max-width:400px){
  .cw-h1{
    max-width:calc(100vw - 56px) !important;
    font-size:28px !important;
  }
}

/* ============================================================
   サービスLP（page-webnaoshi 等）レスポンシブ
   ============================================================ */
@media (max-width:880px){
  .cw-lp-hero,.cw-lp-2col,.cw-lp-case,.cw-lp-voice,.cw-lp-channel{grid-template-columns:1fr !important;}
  .cw-lp-grid3,.cw-lp-grid5{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:560px){
  .cw-lp-grid3,.cw-lp-grid5,.cw-lp-grid2{grid-template-columns:1fr !important;}
  .cw-pricerow{grid-template-columns:1fr !important;gap:4px !important;}
}

/* PCではモバイルメニュー関連は隠す */
.cw-menu-toggle{display:none;}
.cw-mobile-menu{display:none;}

/* ============================================================
   LP ハンバーガーメニュー
   ============================================================ */
/* LP: 横スクロール防止（HEROウォーターマークがright:-30pxではみ出すため） */
body.cw-lp{overflow-x:hidden;}
body.cw-lp section{scroll-margin-top:86px;}

/* plus料金表: 「月額」は条件ラベル、数字を主役にする */
.cw-plus-price-amount{white-space:nowrap;}
.cw-plus-price-prefix{
  display:block;
  margin:0 0 .32em;
  font-size:.34em;
  line-height:1;
  letter-spacing:.12em;
}
.cw-plus-price-number{font-size:1em;line-height:.9;}
.cw-plus-price-suffix{margin-left:.12em;font-size:.46em;letter-spacing:0;}

/* LP navのデフォルト表示（PCでは常にflex） */
.cw-lp-nav{display:flex;}

.cw-lp-burger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;background:none;border:none;cursor:pointer;
  padding:6px;z-index:201;flex:none;
}
.cw-lp-burger span{
  display:block;width:22px;height:2px;background:#1c1b18;
  transition:transform .25s,opacity .25s;transform-origin:center;
}
.cw-lp-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.cw-lp-burger.is-open span:nth-child(2){opacity:0;}
.cw-lp-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:880px){
  .cw-lp-burger{display:flex;}

  /* ナビをオーバーレイ化（display:noneを!importantでインライン上書き） */
  .cw-lp-nav{
    display:none !important;
    position:fixed;inset:0;
    background:rgba(251,250,247,.97);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    flex-direction:column !important;align-items:center !important;justify-content:center !important;
    flex-wrap:nowrap !important;gap:36px !important;z-index:200;padding:60px 24px;
  }
  .cw-lp-nav.cw-lp-nav--open{display:flex !important;}
  .cw-lp-nav a{font-size:18px !important;padding:8px 0 !important;}

  /* VOICEフィーチャード写真：縦長4/5→横長に抑える */
  .cw-lp-voice > div:first-child{
    aspect-ratio:3/2 !important;
    min-height:0 !important;
  }

  /* STORYアバターブロック：モバイルでは横並び */
  #story .cw-lp-2col > div:first-child{
    flex-direction:row !important;
    align-items:center !important;
    min-width:0 !important;
    gap:14px !important;
  }

  /* EXAMPLEセクション：PC画面モックアップの高さ制限 */
  #example .cw-lp-2col figure:last-child img{
    max-height:300px;
    object-fit:cover;
    object-position:top;
  }

  /* 見出し：word-break:keep-allをnormalに戻して日本語を折り返し可能にする（インライン上書きのため!important必須） */
  body.cw-lp h1,body.cw-lp h2{word-break:normal !important;overflow-wrap:break-word !important;}
  /* グリッドセルのmin-width:autoがはみ出しコンテンツで全体を拡張するのを防ぐ */
  .cw-lp-hero > *,.cw-lp-2col > *,.cw-lp-case > *,.cw-lp-voice > *,.cw-lp-channel > *{min-width:0;}

  /* HEROセクション：モバイルで上下padding縮小 */
  .cw-lp-hero{
    padding-top:clamp(32px,5vw,48px) !important;
    padding-bottom:clamp(32px,5vw,48px) !important;
  }

  /* 各セクションの上下padding縮小 */
  section > div[style*="clamp(56px"]{
    padding-top:clamp(36px,5vw,56px) !important;
    padding-bottom:clamp(36px,5vw,56px) !important;
  }

  .cw-plus-stepgrid{
    grid-template-columns:1fr !important;
  }

  .cw-plus-step,
  .cw-plus-flow{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:4px 14px !important;
    align-items:start !important;
    padding:20px 18px !important;
  }

  .cw-plus-step-num,
  .cw-plus-flow-num{
    grid-row:1 / 3 !important;
    font-size:19px !important;
    line-height:1.2 !important;
    letter-spacing:.02em !important;
    margin:3px 0 0 !important;
  }

  .cw-plus-step h3,
  .cw-plus-flow h3{
    font-size:17px !important;
    line-height:1.45 !important;
    margin:0 0 2px !important;
  }

  .cw-plus-step p,
  .cw-plus-flow p{
    grid-column:2 !important;
    font-size:13.5px !important;
    line-height:1.85 !important;
  }

  .cw-plus-reason-grid{
    grid-template-columns:1fr !important;
  }

  .cw-plus-article-links{
    grid-template-columns:1fr !important;
    max-width:none !important;
    gap:18px !important;
    margin-top:24px !important;
  }

  .cw-plus-article-links a{
    padding:0 !important;
  }

  .cw-plus-option-list{
    grid-template-columns:1fr !important;
  }

  .cw-plus-option-item{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:20px 18px !important;
  }

  .cw-plus-option-item strong{
    white-space:normal !important;
    font-size:20px !important;
  }

  /* plus料金表: 3プランをモバイルで無理に横並びにせず、
     金額と内容を一つずつ比較できるカードにする */
  .cw-plus-price-support-grid{
    grid-template-columns:1fr !important;
  }

  .cw-plus-price-support-card{
    min-width:0 !important;
    padding:28px 24px !important;
  }

  .cw-plus-price-support-card h3{
    font-size:20px !important;
    line-height:1.45 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  .cw-plus-price-support-card strong{
    font-size:clamp(36px,11vw,48px) !important;
    white-space:nowrap !important;
  }

  .cw-plus-price-support-card > p:last-child{
    font-size:14px !important;
    line-height:1.9 !important;
  }

  body.cw-lp #faq > div{
    width:100% !important;
    max-width:none !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  body.cw-lp #faq .cw-faq{
    padding:18px 0 !important;
  }

  body.cw-lp #faq .cw-faq summary{
    min-width:0 !important;
    gap:12px !important;
    font-size:15px !important;
    line-height:1.55 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body.cw-lp #faq .cw-faq summary .cw-faq-mark{
    flex:none !important;
    min-width:18px !important;
    text-align:right !important;
  }

  body.cw-lp #faq .cw-faq p{
    font-size:13.5px !important;
    line-height:1.9 !important;
    margin-top:12px !important;
  }
}

/* ============================================================
   モバイルボトムナビ（スマホのみ・常時表示）
   ============================================================ */
.cw-bottom-nav{display:none;}
@media(max-width:880px){
  .cw-bottom-nav{
    display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
    position:fixed;bottom:14px;left:16px;right:16px;z-index:90;
    background:rgba(251,250,247,.97);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid #e4e0d8;border-radius:18px;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.4);
    padding:9px 4px;
  }
  .cw-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;
    gap:5px;text-decoration:none;color:#1c1b18;padding:4px 0;
  }
  .cw-bottom-nav a:nth-child(2){border-left:1px solid #e9e5dc;border-right:1px solid #e9e5dc;}
  .cw-bottom-nav span{font:600 10px/1 'Zen Kaku Gothic New',sans-serif;color:#1c1b18;}
  body{padding-bottom:90px;}
}