@charset "UTF-8";

.under-main { overflow:hidden; background:#fff; }
.under-main section { margin-top:0; }
.under-hero { position:relative; padding:60px 0 55px; background-color:var(--ezec-light); background-image:radial-gradient(circle at 8% 18%,rgba(58,143,204,.35) 0 82px,transparent 84px),radial-gradient(circle,rgba(19,50,92,.14) 1.5px,transparent 1.8px),linear-gradient(125deg,transparent 0 68%,rgba(255,255,255,.7) 68% 100%); background-position:0 0,calc(100% - 35px) 35px,0 0; background-size:auto,18px 18px,auto; }
.under-hero-grid { display:grid; grid-template-columns:1fr 420px; gap:80px; align-items:center; }
.under-kicker { margin:0 0 22px; color:var(--ezec-teal); font-size:1.5rem; font-weight:700; letter-spacing:.08em; }
.under-hero h1 { margin:0; font-size:clamp(4rem, 0.788rem + 4.18vw, 5.8rem); line-height:1.35; color:var(--ezec-ink); }
.under-hero h1 .renewal-copy-accent { color:var(--ezec-teal); }
.under-hero-lead { margin:30px 0 0; font-size:1.9rem; line-height:2; }
.under-hero-visual { position:relative; border:8px solid rgba(255,255,255,.78); border-radius:24px; box-shadow:18px 18px 0 rgba(58,143,204,.35); transform:rotate(1deg); }
.under-hero-visual img { display:block; width:100%; height:360px; object-fit:cover; border-radius:16px; }
.under-section { position:relative; padding:clamp(120px,10vw,150px) 0 clamp(150px,12vw,190px); background-color:#fff; background-image:radial-gradient(circle at 90% 15%,rgba(44,167,155,.12) 0 115px,transparent 117px); }
.under-section.is-light { background-color:var(--ezec-light); background-image:repeating-linear-gradient(135deg,rgba(17,17,17,.025) 0,rgba(17,17,17,.025) 1px,transparent 1px,transparent 14px); }
.under-section.is-pink { background-color:#eaf3f8; background-image:radial-gradient(circle,rgba(44,167,155,.12) 1.5px,transparent 1.7px); background-size:19px 19px; }
.under-section-head { max-width:800px; margin-bottom:65px; }
.under-section-head.is-center { margin-right:auto; margin-left:auto; text-align:center; }
.under-section h2 { margin:0; font-size:clamp(3.1rem, 0.781rem + 3.02vw, 4.4rem); line-height:1.5; }
.under-section-head > p:last-child { margin:24px 0 0; font-size:1.75rem; line-height:2; }

/*=================================================================
  プライバシーポリシー等、長文テキストコンテンツ用の共通スタイル
=================================================================*/
.policy-text { max-width:820px; margin:0 auto; }
.policy-text h3 { margin:48px 0 16px; font-size:2rem; line-height:1.5; color:var(--ezec-ink); }
.policy-text h3:first-child { margin-top:0; }
.policy-text p { margin:0 0 16px; font-size:1.6rem; line-height:1.9; color:#333; }
.policy-text ul { margin:0 0 16px; padding:0; list-style:none; }
.policy-text ul li { position:relative; padding-left:22px; margin-bottom:8px; font-size:1.6rem; line-height:1.8; color:#333; }
.policy-text ul li:before { content:""; position:absolute; top:11px; left:0; width:7px; height:7px; border-radius:50%; background:var(--ezec-teal); }
.policy-text .policy-company { margin-top:24px; padding:22px 26px; border-radius:14px; background:var(--ezec-light); font-size:1.6rem; line-height:1.9; }
.under-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.under-card-grid.is-two { grid-template-columns:repeat(2,1fr); }
.under-card-grid.is-four { grid-template-columns:repeat(2,1fr); gap:30px; }
.under-card { position:relative; overflow:hidden; padding:38px; border:1px solid rgba(30,20,10,.05); border-radius:20px; background:#fff; box-shadow:0 8px 26px rgba(30,20,10,.08); transition:transform .25s ease,box-shadow .25s ease; }
.under-card:after { content:""; position:absolute; right:-42px; bottom:-42px; width:105px; height:105px; border-radius:50%; background:repeating-linear-gradient(45deg,rgba(44,167,155,.08) 0,rgba(44,167,155,.08) 4px,transparent 4px,transparent 10px); pointer-events:none; }
.under-card:hover { transform:translateY(-5px); box-shadow:0 16px 35px rgba(30,20,10,.13); }
.under-card-icon { display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin-bottom:28px; border-radius:18px; background:#eaf3f8; color:var(--ezec-teal); }
.under-card-icon.is-solid { background:var(--ezec-gradient); color:#fff; box-shadow:0 8px 18px rgba(44,167,155,.28); }
.under-card-icon svg { display:block; width:34px; height:34px; }
.under-card-icon img { display:block; width:100px; height:100px; max-width:none; max-height:none; border-radius:20px; object-fit:cover; }
.under-card h3 { margin:0 0 15px; font-size:2.6rem; line-height:1.5; }
.under-card p { margin:0; font-size:1.6rem; line-height:1.9; }
.under-card .card-more-link { margin-top:16px !important; }
.under-card .card-more-link a { color:var(--ezec-teal); font-weight:700; font-size:1.4rem; text-decoration:none; }
.under-card .card-more-link a:hover { text-decoration:underline; }
.under-card .card-more-link a:after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); vertical-align:1px; transition:transform .2s ease; }
.under-card .card-more-link a:hover:after { transform:rotate(45deg) translate(2px,-2px); }
.under-card ul { margin:22px 0 0; padding:0; list-style:none; }
.under-card li { position:relative; padding:6px 0 6px 25px; font-size:1.5rem; line-height:1.65; }
.under-card li:before { content:""; position:absolute; top:14px; left:0; width:9px; height:9px; border-radius:50%; background:var(--ezec-teal); }
.under-card li a { color:var(--ezec-ink); text-decoration:none; }
.under-card li a:hover { color:var(--ezec-teal); text-decoration:underline; }
.card-word { display:block; margin:0 0 7px; color:#888; font-size:1.35rem; font-weight:700; line-height:1.3; letter-spacing:.1em; }
.web-operation-card .card-word { color:var(--ezec-teal); }
.web-renewal-card .card-word { color:#555; }
.web-plan-card,.web-operation-card,.web-renewal-card { padding-top:44px; }
.price-group + .price-group { margin-top:90px; }
.price-group-head { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:30px; }
.price-group h2 { margin:0; font-size:clamp(2.8rem, 1.194rem + 2.09vw, 3.7rem); }
.price-group-head p { max-width:540px; margin:0; font-size:1.5rem; line-height:1.8; }
.price-table { width:100%; border-collapse:collapse; border-top:3px solid #111; }
.price-table th,.price-table td { padding:23px 20px; border-bottom:1px solid #c9c5bc; text-align:left; font-size:1.6rem; line-height:1.65; vertical-align:top; }
.price-table th { width:29%; font-size:1.75rem; }
.price-table td.price { width:20%; color:var(--ezec-teal); font-size:2rem; font-weight:700; white-space:nowrap; }
.price-table td.price small { font-size:.52em; font-weight:500; color:#8a94a3; }
.price-note { margin:25px 0 0; font-size:1.4rem; line-height:1.8; }
.under-cta { position:relative; padding:100px 0; color:#fff; background:var(--ezec-gradient); text-align:center; }
.under-cta h2 { margin:0 0 18px; font-size:clamp(3rem, 1.573rem + 1.86vw, 3.8rem); }
.under-cta p { margin:0 0 30px; font-size:1.7rem; }
.under-cta .renewal-btn { color:var(--ezec-teal); background:#fff; }
.insta-intro { display:grid; grid-template-columns:420px 1fr; gap:80px; align-items:center; }
.insta-intro img { width:100%; border-radius:24px; }
.insta-intro h2 { margin:0 0 25px; font-size:clamp(3.1rem, 1.137rem + 2.55vw, 4.2rem); line-height:1.5; }
.insta-intro p { margin:0; font-size:1.75rem; line-height:2; }
.course-price { margin:22px 0 0!important; color:var(--ezec-teal); font-size:2.3rem!important; font-weight:700; }
.course-price small { font-size:.5em; font-weight:500; color:#8a94a3; }
/* Instagram講座の受講者向け「運用チェック」帯 */
.course-followup { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; margin-top:40px; padding:38px 44px; border:3px solid var(--ezec-teal); border-radius:20px; background:#eaf3f8; }
.course-followup-badge { display:inline-block; margin:0 0 12px; padding:5px 16px; border-radius:50px; color:#fff; background:var(--ezec-gradient); font-size:1.3rem; font-weight:700; letter-spacing:.04em; }
.course-followup h3 { margin:0 0 12px; font-size:2.6rem; line-height:1.45; color:var(--ezec-ink); }
.course-followup p { margin:0; font-size:1.6rem; line-height:1.85; }
.course-followup ul { margin:16px 0 0; padding:0; list-style:none; }
.course-followup li { position:relative; padding:3px 0 3px 22px; font-size:1.5rem; line-height:1.7; }
.course-followup li:before { content:""; position:absolute; top:12px; left:0; width:8px; height:8px; border-radius:50%; background:var(--ezec-teal); }
.course-followup .course-followup-note { margin-top:16px; font-size:1.3rem; color:#5b6678; }
.course-followup .course-price { margin:0!important; white-space:nowrap; }
.service-feature { display:grid; grid-template-columns:1fr 420px; gap:80px; align-items:center; }
.service-feature.reverse { grid-template-columns:420px 1fr; }
.service-feature img { display:block; width:100%; height:420px; border-radius:24px; object-fit:cover; }
.service-feature img.colorme-logo-img { height:420px; padding:70px; object-fit:contain; background:#fff; box-sizing:border-box; }
.service-feature .renewal-link { margin-top:18px; }
.ec-genre-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0; padding:0; list-style:none; }
.ec-genre-list li { padding:10px 22px; border-radius:30px; background:#fff; box-shadow:0 4px 12px rgba(19,50,92,.08); font-size:1.5rem; font-weight:700; color:var(--ezec-navy); }
.ec-genre-slider-box { width:100%; margin:44px 0 0; border-radius:20px; overflow:hidden; box-shadow:0 10px 26px rgba(19,50,92,.12); }
.ec-genre-slider { margin:0; padding:0; list-style:none; }
.ec-genre-slider .slick-track { display:flex; }
.ec-genre-slider li { float:left; }
.ec-genre-slide { height:280px; background-position:center center; background-repeat:no-repeat; background-size:cover; background-color:#ddd; }
.ec-feature-block + .ec-feature-block { margin-top:90px; }
.ec-template-preview { width:min(720px,100%); margin:0 auto; }
.ec-template-preview .ec-screenshot-frame { height:340px; }
.ec-plan-intro { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 36px; }
.ec-plan-intro article { padding:26px 24px; border-radius:16px; background:#fff; border:1px solid rgba(19,50,92,.08); box-shadow:0 6px 18px rgba(19,50,92,.06); }
.ec-plan-intro article.is-recommended { position:relative; background:#eaf3f8; border-color:rgba(44,167,155,.3); }
.ec-plan-intro .card-word { display:block; margin:0 0 4px; color:#888; font-size:1.3rem; font-weight:700; letter-spacing:.08em; }
.ec-plan-intro h3 { margin:0 0 6px; font-size:2rem; }
.ec-plan-intro .course-price { margin:0 0 12px !important; color:var(--ezec-teal); font-size:2rem !important; font-weight:700; }
.ec-plan-intro p:last-child { margin:0; font-size:1.4rem; line-height:1.8; }

.ec-compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; box-shadow:0 6px 18px rgba(19,50,92,.06); }
.ec-compare-table { width:100%; min-width:680px; border-collapse:collapse; background:#fff; }
.ec-compare-table th,.ec-compare-table td { padding:14px 18px; border-bottom:1px solid var(--ezec-line); text-align:center; font-size:1.4rem; white-space:nowrap; }
.ec-compare-table th:first-child,.ec-compare-table td:first-child { text-align:left; font-weight:700; white-space:normal; }
.ec-compare-table thead th { background:var(--ezec-navy); color:#fff; font-size:1.6rem; font-weight:700; }
.ec-compare-table thead th:first-child { background:var(--ezec-ink); }
.ec-compare-table thead th.is-featured { background:var(--ezec-teal); }
.ec-compare-table thead th .plan-price { display:block; margin-top:6px; color:#fff; font-weight:700; font-size:1.7rem; }
.ec-compare-table thead th .plan-price small { font-size:.55em; font-weight:500; color:rgba(255,255,255,.75); }
.ec-compare-table tbody th { font-size:1.4rem; font-weight:500; background:var(--ezec-light); }
.ec-compare-table tbody tr:nth-child(even) td:not(.is-featured-col) { background:#f8f9fb; }
.ec-compare-table td.is-featured-col { background:#eaf3f8; }
.ec-compare-table .is-dash { color:#c9c5bc; }
.ec-compare-table .dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ezec-teal); }
.ec-compare-table .zone-row th { padding:10px 18px; background:var(--ezec-ink); color:#fff; font-size:1.25rem; font-weight:700; letter-spacing:.1em; text-align:left; }
.ec-compare-table .zone-row td { padding:10px 18px; background:var(--ezec-ink); }
.ec-price-note { margin:20px 0 0; font-size:1.4rem; line-height:1.8; }
.ec-note-box { margin:24px 0 0; padding:20px 24px; border-radius:14px; background:#fff7e6; font-size:1.4rem; line-height:1.8; color:#7a5a00; }
@media screen and (max-width:768px) {
  .ec-plan-intro { grid-template-columns:1fr; }
}
.ec-screenshot-frame { position:relative; width:100%; height:380px; border-radius:16px; overflow:hidden; background:var(--ezec-light); border:1px solid rgba(19,50,92,.1); box-shadow:0 10px 26px rgba(19,50,92,.1); }
.ec-screenshot-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.ec-screenshot-caption { margin:10px 0 0; font-size:1.2rem; color:#999; text-align:center; }
@media screen and (max-width:768px) {
  .ec-screenshot-frame { height:auto; aspect-ratio:4/3; }
}
.service-feature h2 { margin:0 0 25px; font-size:clamp(3.1rem, 1.137rem + 2.55vw, 4.2rem); line-height:1.5; }
.service-feature h3 { margin:0 0 20px; font-size:2.6rem; line-height:1.45; color:var(--ezec-ink); }
.service-feature .renewal-label { margin-bottom:16px; }
.service-feature p { margin:0; font-size:1.65rem; line-height:1.95; color:#444; }
.service-check { margin:28px 0 0; padding:0; list-style:none; }
.service-check li { position:relative; padding:8px 0 8px 28px; font-size:1.55rem; line-height:1.65; }
.service-check li:before { content:""; position:absolute; top:17px; left:0; width:10px; height:10px; border-radius:50%; background:var(--ezec-teal); }
.service-more-link { margin:45px 0 0; text-align:center; }
.web-work-section { overflow:hidden; }
.web-work-section:before { content:""; position:absolute; top:80px; right:-65px; width:230px; height:230px; border-radius:50%; background:repeating-linear-gradient(0deg,rgba(58,143,204,.14) 0,rgba(58,143,204,.14) 5px,transparent 5px,transparent 13px); }
.web-industries-visual { overflow:hidden; margin:0; border-radius:24px; background:var(--ezec-navy); box-shadow:0 12px 30px rgba(30,20,10,.14); }
.web-industries-visual > img { display:block; width:100%; aspect-ratio:3/1; object-fit:cover; }
.web-industries-visual figcaption { display:grid; grid-template-columns:repeat(3,1fr); color:#fff; }
.web-industries-visual figcaption div { padding:25px 28px 28px; border-right:1px solid rgba(255,255,255,.18); }
.web-industries-visual figcaption div:last-child { border-right:0; }
.web-industries-visual figcaption span { display:block; margin:0 0 7px; color:#8fd3c9; font-size:1.35rem; font-weight:700; line-height:1.3; letter-spacing:.1em; }
.web-industries-visual figcaption strong { display:block; margin-top:6px; font-size:2rem; }
.web-industries-visual figcaption small { display:block; margin-top:7px; font-size:1.3rem; line-height:1.6; }
.operation-warning { margin:-10px 0 60px; padding:38px 42px; border-left:8px solid var(--ezec-teal); border-radius:18px; color:#fff; background:var(--ezec-navy); }
.operation-warning-kicker { margin:0 0 12px; color:#8fd3c9; font-size:1.45rem; font-weight:700; letter-spacing:.05em; }
.operation-warning h3 { margin:0 0 18px; font-size:clamp(2.3rem, 1.408rem + 1.16vw, 2.8rem); line-height:1.55; }
.operation-warning > p:last-child { max-width:920px; margin:0; font-size:1.6rem; line-height:1.9; }
.web-flow-box { margin:0 0 55px; padding:44px 40px 38px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(30,20,10,.08); }
.web-flow-box-title { margin:0 0 34px; color:var(--ezec-teal); font-size:clamp(1.8rem, 1.265rem + 0.7vw, 2.1rem); font-weight:900; text-align:center; letter-spacing:.03em; }
.web-flow-box-steps { display:flex; align-items:flex-start; }
.web-flow-step { flex:1 1 0; min-width:0; padding:0 8px; text-align:center; }
.web-flow-step .web-growth-icon { display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 16px; border-radius:15px; background:#eaf3f8; color:var(--ezec-teal); }
.web-flow-step .web-growth-icon svg { display:block; width:30px; height:30px; }
.web-flow-step strong { display:block; font-size:1.55rem; line-height:1.5; }
.web-flow-step small { display:block; margin-top:6px; font-size:1.2rem; line-height:1.6; color:#5c6773; }
.web-flow-arrow { flex:0 0 auto; width:36px; margin-top:52px; color:var(--ezec-teal); }
.web-flow-arrow:before { content:""; display:block; width:12px; height:12px; margin:0 auto; border-top:3px solid currentColor; border-right:3px solid currentColor; transform:rotate(45deg); }
.service-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.service-steps article { padding:34px 24px 28px; border-bottom:3px solid var(--ezec-teal); border-radius:0; background:transparent; box-shadow:none; }
.step-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.step-icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:56px; height:56px; border-radius:14px; background:var(--ezec-gradient); color:#fff; box-shadow:0 8px 18px rgba(44,167,155,.28); }
.step-icon svg { display:block; width:28px; height:28px; }
.service-steps span { display:block; color:var(--ezec-teal); font-size:6.5rem; font-weight:900; line-height:.85; letter-spacing:-.07em; text-shadow:3px 3px 0 #fff; }
.service-steps h3 { margin:0 0 12px; font-size:2.1rem; line-height:1.5; }
.service-steps p { margin:0; font-size:1.45rem; line-height:1.8; }
.under-card.is-recommended,.under-card.is-proven { position:relative; overflow:visible; }
.under-card.is-recommended { border:3px solid var(--ezec-teal); }
.under-card.is-recommended:after,.under-card.is-proven:after { display:none; }
.service-badge { position:absolute; z-index:2; top:0; left:50%; transform:translate(-50%,-50%); margin:0; padding:7px 20px; border-radius:50px; white-space:nowrap; color:#fff; background:var(--ezec-gradient); box-shadow:0 6px 14px rgba(44,167,155,.3); font-size:1.3rem!important; font-weight:700; }
.price-subheading { margin:55px 0 20px; font-size:2.6rem; }
.print-item-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.print-item-list li { padding-top:8px; padding-bottom:8px; }

@media screen and (max-width:768px) {
  .under-hero { padding:45px 0 45px; }
  .under-hero-grid,.insta-intro { grid-template-columns:1fr; gap:40px; }
  .under-hero h1 { font-size:clamp(2.6rem, 1.6rem + 3.125vw, 4rem); }
  .under-hero-lead { font-size:1.65rem; }
  .under-hero-visual img { height:auto; aspect-ratio:4/3; }
  .under-hero-visual { border-width:5px; box-shadow:10px 10px 0 rgba(58,143,204,.35); transform:none; }
  .under-section { padding:80px 0 100px; }
  .under-section-head { margin-bottom:42px; }
  .policy-text h3 { margin-top:36px; }
  .under-section h2,.insta-intro h2 { font-size:clamp(2rem, 1.214rem + 2.455vw, 3.1rem); }
  .ec-genre-slide { height:200px; }
  .under-card-grid,.under-card-grid.is-two,.under-card-grid.is-four { grid-template-columns:1fr; gap:25px; }
  .under-card { padding:28px 24px; }
  .under-card-icon,.under-card-icon img { width:86px; height:86px; }
  .price-group + .price-group { margin-top:65px; }
  .price-group-head { display:block; }
  .price-group h2 { margin-bottom:15px; font-size:clamp(1.8rem, 1.086rem + 2.232vw, 2.8rem); }
  .price-table,.price-table tbody,.price-table tr,.price-table th,.price-table td { display:block; width:100%; }
  .price-table tr { padding:20px 0; border-bottom:1px solid #c9c5bc; }
  .price-table th,.price-table td { padding:4px 0; border:0; }
  .price-table td.price { width:100%; }
  .under-cta { padding:75px 0; }
  .under-cta h2 { font-size:clamp(2rem, 1.286rem + 2.232vw, 3rem); }
  .service-feature,.service-feature.reverse { grid-template-columns:1fr; gap:38px; }
  .service-feature img { height:auto; aspect-ratio:4/3; }
  .service-feature h2 { font-size:clamp(2rem, 1.214rem + 2.455vw, 3.1rem); }
  .web-industries-visual > img { aspect-ratio:4/3; }
  .web-industries-visual figcaption { grid-template-columns:1fr; }
  .web-industries-visual figcaption div { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); }
  .web-industries-visual figcaption div:last-child { border-bottom:0; }
  .operation-warning { margin-top:0; margin-bottom:42px; padding:30px 24px; border-left-width:6px; }
  .operation-warning h3 { font-size:clamp(1.7rem, 1.271rem + 1.339vw, 2.3rem); }
  .operation-warning h3 br { display:none; }
  .web-flow-box { padding:32px 22px 28px; }
  .web-flow-box-title { margin-bottom:24px; font-size:1.8rem; }
  .web-flow-box-steps { flex-direction:column; align-items:stretch; }
  .web-flow-step { padding:0; }
  .web-flow-arrow { width:auto; margin:14px 0; transform:rotate(0); }
  .web-flow-arrow:before { transform:rotate(135deg); }
  .service-steps { grid-template-columns:1fr; gap:18px; }
  .print-item-list { grid-template-columns:1fr; }
}

/*=================================================================
  お問い合わせフォーム（CF7互換マークアップ／WordPress移行時にform要素をCF7 shortcode出力へ差替）
=================================================================*/
.contact-layout { display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:start; }

.contact-form-panel { padding:44px 46px; border-radius:24px; background:#fff; border:1px solid rgba(19,50,92,.08); box-shadow:0 10px 30px rgba(19,50,92,.07); }

.wpcf7-form dl { width:100%; margin:0; border-top:1px solid var(--ezec-line); }
.wpcf7-form dt { padding:26px 0 10px; border-bottom:0; text-align:left; }
.wpcf7-form dt p { margin:0; display:flex; align-items:center; gap:12px; font-size:1.6rem; font-weight:700; color:var(--ezec-ink); }
.wpcf7-form dt span { display:inline-block; flex:none; padding:4px 12px; border-radius:20px; font-size:1.2rem; font-weight:700; letter-spacing:.05em; }
.wpcf7-form dt.required span { color:#fff; background:var(--ezec-gradient); }
.wpcf7-form dt.optional span { color:var(--ezec-teal); background:#eaf3f8; border:1px solid rgba(44,167,155,.3); }
.wpcf7-form dd { padding:0 0 26px; border-bottom:1px solid var(--ezec-line); }
.wpcf7-form dd p { margin:0; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width:100%; box-sizing:border-box; padding:14px 18px; border:1px solid var(--ezec-line); border-radius:10px;
  background:var(--ezec-light); font-family:inherit; font-size:1.6rem; color:var(--ezec-ink);
}
.wpcf7-form textarea { resize:vertical; min-height:180px; line-height:1.8; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color:#9aa5b1; }
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus { outline:none; border-color:var(--ezec-teal); background:#fff; box-shadow:0 0 0 3px rgba(44,167,155,.12); }

.wpcf7-form .wpcf7-form-control.wpcf7-radio { display:flex; flex-direction:column; gap:12px; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item { margin:0; }
.wpcf7-form .wpcf7-radio label { display:inline-flex; align-items:center; gap:10px; font-size:1.55rem; color:var(--ezec-ink); cursor:pointer; }
.wpcf7-form .wpcf7-radio input[type="radio"] { width:18px; height:18px; margin:0; accent-color:var(--ezec-teal); }

.wpcf7-form .zip-row { display:flex; align-items:center; gap:12px; }
.wpcf7-form .zip-row .wpcf7-form-control-wrap { flex:0 1 260px; }
.wpcf7-form .zip-row input#postal { width:100%; }
.wpcf7-form .btn-zip { flex:none; color:var(--ezec-teal); font-size:1.4rem; text-decoration:underline; white-space:nowrap; }
.wpcf7-form .btn-zip:hover { text-decoration:none; }

.wpcf7-form .text-privacy { margin:0 0 14px; font-size:1.4rem; line-height:1.9; color:#555; }
.wpcf7-form .link-privacy { color:var(--ezec-teal); text-decoration:underline; }
.wpcf7-form ul { margin:0; padding:0; list-style:none; }
.wpcf7-form .check-privacy { display:block; padding:16px 20px; border-radius:12px; background:var(--ezec-light); }
.wpcf7-form .check-privacy label { display:inline-flex; align-items:center; gap:10px; font-size:1.45rem; color:var(--ezec-ink); cursor:pointer; }
.wpcf7-form .check-privacy input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:var(--ezec-teal); }

.wpcf7-form p#form_submit { margin:36px 0 0; padding:0; text-align:center; }
.wpcf7-form input[type="submit"] {
  display:inline-block; min-width:260px; padding:18px 30px; border:0; border-radius:40px;
  background:var(--ezec-gradient); color:#fff; font-family:inherit; font-size:1.75rem; font-weight:700;
  letter-spacing:.05em; cursor:pointer; box-shadow:0 10px 24px rgba(44,167,155,.3); transition:filter .2s ease,transform .2s ease;
}
.wpcf7-form input[type="submit"]:hover { filter:brightness(1.06); transform:translateY(-2px); }

.contact-side-panel { display:flex; flex-direction:column; gap:24px; }
.contact-info-card { padding:34px 30px; border-radius:20px; background:var(--ezec-navy); color:#fff; }
.contact-info-logo { display:block; width:180px; height:auto; margin:0 0 22px; }
.contact-info-list { margin:0; padding:0; list-style:none; }
.contact-info-list li { padding:14px 0; border-top:1px solid rgba(255,255,255,.16); font-size:1.45rem; line-height:1.7; }
.contact-info-list li:first-child { border-top:0; }
.contact-info-list span { display:block; margin-bottom:4px; color:#8fd6cc; font-size:1.2rem; font-weight:700; letter-spacing:.08em; }
.contact-info-list a { color:#fff; font-weight:700; text-decoration:none; }
.contact-info-note { margin:20px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); font-size:1.25rem; line-height:1.8; color:#c7d3e0; }
.contact-faq-card { padding:26px 28px; border-radius:20px; background:var(--ezec-light); }
.contact-faq-card p { margin:0 0 12px; font-size:1.4rem; line-height:1.75; color:#444; }
.contact-faq-link { display:inline-flex; align-items:center; gap:6px; color:var(--ezec-teal); font-weight:700; font-size:1.4rem; text-decoration:none; }
.contact-faq-link:after { content:"→"; transition:transform .2s ease; }
.contact-faq-link:hover:after { transform:translateX(4px); }

@media screen and (max-width:768px) {
  .contact-layout { grid-template-columns:1fr; gap:36px; }
  .contact-form-panel { padding:30px 22px; }
  .wpcf7-form dt p { font-size:1.5rem; }
  .wpcf7-form input[type="submit"] { width:100%; }
  .wpcf7-form .zip-row { flex-wrap:wrap; }
  .wpcf7-form .zip-row .wpcf7-form-control-wrap { flex:1 1 100%; }
}

/*=================================================================
  制作実績：経験してきた分野（ジャンル別タグリスト）
=================================================================*/
.works-genre-block + .works-genre-block { margin-top:44px; }
.works-genre-block h3 { margin:0 0 20px; font-size:2rem; font-family:"Archivo",Arial,sans-serif; color:var(--ezec-teal); }
.works-genre-block .ec-genre-list { justify-content:flex-start; }

.work-detail-list { margin:20px 0 0; padding:0; list-style:none; }
.work-detail-list li { position:relative; padding:5px 0 5px 22px; font-size:1.4rem; line-height:1.7; color:#555; }
.work-detail-list li:before { content:""; position:absolute; top:13px; left:0; width:8px; height:8px; border-radius:50%; background:var(--ezec-teal); }

.works-case,.works-case.reverse { grid-template-columns:1fr 1fr; align-items:start; }
.works-case img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; box-shadow:0 14px 30px rgba(19,50,92,.18); }
.works-case-media { display:flex; flex-direction:column; align-items:center; gap:12px; }
.works-case-link { display:inline-block; margin-top:10px; font-size:1.7rem; color:var(--ezec-teal); font-weight:700; text-align:center; text-decoration:none; word-break:break-all; }
.works-case-link:hover { text-decoration:underline; }
.works-case .renewal-work-date { font-size:1.3rem; margin-bottom:10px; }
.works-case h3 { font-weight:700; margin-bottom:8px; font-size:2.9rem; }
.works-case .renewal-work-title { color:var(--ezec-teal); font-size:2.1rem; font-weight:700; margin:0 0 18px; }

/*=================================================================
  サンクスページ
=================================================================*/
.thanks-body { max-width:600px; margin:0 auto; text-align:center; }
.thanks-body p { margin:0 0 28px; font-size:1.7rem; line-height:2; }
.thanks-body p:last-child { margin-bottom:0; }
.thanks-tel a { color:var(--ezec-teal); font-size:1.3em; font-weight:700; text-decoration:none; }
.thanks-tel a:hover { text-decoration:underline; }

/*=================================================================
  SP: 可読性向上（本文・リード文・表組みのサイズ/行間、フォントはtop-renewal.cssのbody指定を継承）
=================================================================*/
@media screen and (max-width:768px) {
  .under-hero-lead { line-height:1.75; }
  .under-card p { line-height:1.7; }
  .price-group-head p { line-height:1.7; }
  .price-table th, .price-table td { font-size:1.6rem; }
  .price-note { font-size:1.5rem; line-height:1.7; }
  .ec-plan-intro p:last-child { font-size:1.5rem; line-height:1.7; }
  .ec-compare-table th, .ec-compare-table td { font-size:1.5rem; }
  .ec-price-note { font-size:1.5rem; line-height:1.7; }
  .ec-note-box { font-size:1.5rem; line-height:1.7; }
  .operation-warning > p:last-child { line-height:1.7; }
  .wpcf7-form .text-privacy { font-size:1.5rem; line-height:1.7; }
  .contact-faq-card p { font-size:1.5rem; }
  .work-detail-list li { font-size:1.5rem; }
  .works-case-link { font-size:1.6rem; }
  .thanks-body p { line-height:1.75; }
  /* 制作事例：画像と文字ボックスは横並びを維持せず縦並びに */
  .works-case,.works-case.reverse { grid-template-columns:1fr; gap:30px; }
  .course-followup { grid-template-columns:1fr; gap:18px; margin-top:30px; padding:30px 22px 26px; }
  .course-followup h3 { font-size:2.1rem; }
  .course-followup p { font-size:1.5rem; line-height:1.75; }
  /* 制作事例：顧客名（h3）・品名（renewal-work-title）が大きすぎるため縮小 */
  .works-case h3 { font-size:2.1rem; }
  .works-case .renewal-work-title { font-size:1.7rem; margin-bottom:14px; }
}

/*=================================================================
  可変版（769〜1199px）：固定幅サイドバー(420px等)をfr比率に、3カラム以上の
  グリッドを2カラムに変更して詰まりを解消する。見出しは各セレクタの基本ルール
  側でclamp()化して連続的に縮小させているため、ここでは触らない。
=================================================================*/
@media screen and (min-width:769px) and (max-width:1199px) {
  .under-hero-grid { grid-template-columns:1.7fr 1fr; gap:50px; }
  .insta-intro { grid-template-columns:1fr 1.7fr; gap:50px; }
  .service-feature { grid-template-columns:1.7fr 1fr; gap:50px; }
  .service-feature.reverse { grid-template-columns:1fr 1.7fr; }
  .under-card-grid { grid-template-columns:repeat(2,1fr); }
  .web-industries-visual figcaption { grid-template-columns:repeat(2,1fr); }
  .service-steps { grid-template-columns:repeat(2,1fr); gap:20px; }
}