/* 全ページ共通の装飾。main.css の後に読み込む。色は main.css の --wp--preset--color--* に合わせる */
.sec { max-width: 1008px; margin: 48px auto 0; padding: 0 24px; box-sizing: border-box; }
.sec * { box-sizing: border-box; }
.sec-label { display: inline-block; margin: 0 0 .6em; padding: .15em .9em; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; background: rgba(46, 28, 255, .08); color: var(--wp--preset--color--foreground); }
.sec-hero { position: relative; overflow: hidden; padding: 56px 48px; border-radius: 30px; color: #fff; background: linear-gradient(120deg, #6b3d8e 0%, #5a35b0 45%, #3e3cb6 100%); }
.sec-hero::before, .sec-hero::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); }
.sec-hero::before { width: 320px; height: 320px; right: -90px; top: -120px; }
.sec-hero::after { width: 180px; height: 180px; right: 90px; bottom: -110px; background: rgba(255, 255, 255, .06); }
.sec-hero .sec-label { background: rgba(255, 255, 255, .16); color: #fff; }
.sec-hero h1, .sec-hero h2 { position: relative; margin: 0 0 .6em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.45; color: #fff; }
.sec-hero > :last-child { margin-bottom: 0; }
.sec-hero p { position: relative; max-width: 34em; margin: 0 0 1.6em; color: rgba(255, 255, 255, .86); }
.sec-hero .ib { display: inline-block; }
.sec-btn { position: relative; display: inline-block; padding: .8em 2em; border-radius: 999px; background: #fff; color: var(--wp--preset--color--foreground); font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(20, 10, 80, .25); transition: transform .2s; }
.sec-btn:hover { transform: translateY(-2px); }
.sec-btn.solid { background: var(--wp--preset--color--foreground); color: #fff; box-shadow: 0 8px 24px rgba(46, 28, 255, .3); }
.sec-block { margin-top: 72px; }
.sec-block > h3 { margin: 0 0 24px; font-size: 1.5rem; line-height: 1.4; color: var(--wp--preset--color--primary); }
.sec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sec-stat { padding: 24px; border-radius: 22px; background: var(--wp--preset--color--background); }
.sec-stat b { display: block; margin-bottom: .2em; font-size: 2rem; line-height: 1.2; color: var(--wp--preset--color--foreground); }
.sec-stat span { font-size: .95rem; }
.sec-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 18px 24px; border: 2px dashed #d9dcea; border-radius: 22px; }
.sec-versions > span:first-child { margin-right: 6px; font-weight: 700; color: var(--wp--preset--color--primary); }
.sec-pill { padding: .25em .9em; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; font-size: .95rem; }
.sec-versions small { flex-basis: 100%; font-size: .85rem; }
.sec-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sec-card { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border-radius: 22px; background: var(--wp--preset--color--background); }
.sec-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--wp--preset--color--foreground); box-shadow: 0 4px 14px rgba(47, 44, 79, .08); }
.sec-card h4 { margin: 0 0 .3em; font-size: 1.1rem; color: var(--wp--preset--color--primary); }
.sec-card p { margin: 0; font-size: .95rem; }
.sec-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sec-steps li { position: relative; padding: 0 12px; text-align: center; counter-increment: s; font-weight: 700; color: var(--wp--preset--color--primary); }
.sec-steps li::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: #fff; border: 2px solid var(--wp--preset--color--foreground); color: var(--wp--preset--color--foreground); font-size: 1.1rem; }
.sec-steps li + li::after { content: ""; position: absolute; top: 24px; left: calc(-50% + 30px); width: calc(100% - 60px); border-top: 2px dashed #c9c6e6; }
.sec-cta { margin-top: 72px; padding: 40px 32px; border-radius: 30px; text-align: center; background: var(--wp--preset--color--background); }
.sec-cta h3 { margin: 0 0 1em; font-size: 1.4rem; color: var(--wp--preset--color--primary); }
.sec-refs { margin-top: 28px; font-size: .8rem; }
.sec-refs a { color: var(--wp--preset--color--secondary); }

/* ページ名(About・Contact などの中央の見出し)の下の飾り */
.sec-page-title { margin: 0; text-align: center; }
.sec-page-title::after { content: ""; display: block; width: 40px; height: 4px; margin: 12px auto 0; border-radius: 999px; background: linear-gradient(90deg, #6b3d8e, #3e3cb6); }

/* 中身を入れる薄いグレーの面 */
.sec-panel { padding: 40px 48px; border-radius: 30px; background: var(--wp--preset--color--background); }
.sec-media { margin: 0; }
.sec-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 22px; box-shadow: 0 10px 30px rgba(47, 44, 79, .12); }

/* トップのニュース */
.sec-news { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center; }
.sec-news ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sec-news li { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: 22px; background: var(--wp--preset--color--background); }
.sec-date { align-self: flex-start; padding: .1em .8em; border-radius: 999px; background: rgba(46, 28, 255, .08); color: var(--wp--preset--color--foreground); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }

/* About の会社情報 */
.sec-dl { margin: 0; display: grid; gap: 0; }
.sec-dl div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 16px 4px; border-bottom: 2px dashed #d9dcea; }
.sec-dl div:last-child { border-bottom: 0; }
.sec-dl dt { font-weight: 700; color: var(--wp--preset--color--foreground); }
.sec-dl dd { margin: 0; font-weight: 700; color: var(--wp--preset--color--primary); }

/* Contact のフォーム(wpforms のクラスと id はそのまま) */
.sec-notice { margin: 0 0 28px; font-weight: 700; color: var(--wp--preset--color--primary); }
.sec-notice .has-vivid-red-color { display: inline-block; margin-top: 12px; padding: .3em 1em; border-radius: 999px; background: rgba(207, 46, 46, .08); }
.sec-form .wpforms-field { padding: 0 0 18px !important; }
.sec-form .wpforms-field-label { margin-bottom: 6px !important; font-weight: 700 !important; color: var(--wp--preset--color--primary) !important; }
.sec-form input[type=text], .sec-form input[type=email], .sec-form textarea { width: 100% !important; max-width: none !important; padding: 12px 16px !important; border: 2px solid #e1e3ef !important; border-radius: 14px !important; background: #fff !important; font: inherit !important; box-shadow: none !important; transition: border-color .2s; }
.sec-form input:focus, .sec-form textarea:focus { outline: none; border-color: var(--wp--preset--color--foreground) !important; }
.sec-form textarea { min-height: 180px; }
.sec-form #contact-submit { padding: .6em 2.6em !important; line-height: 1.6 !important; border: 0 !important; border-radius: 999px !important; background: var(--wp--preset--color--foreground) !important; color: #fff !important; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(46, 28, 255, .3); transition: transform .2s; }
.sec-form #contact-submit:hover { transform: translateY(-2px); }
.sec-form #contact-result { color: #cf2e2e; font-weight: 700; }

/* プライバシーポリシー */
.sec-policy p { margin: 0 0 1em; }
.sec-policy .sec-policy-h { margin: 2em 0 .8em; padding-left: 14px; border-left: 4px solid; border-image: linear-gradient(#6b3d8e, #3e3cb6) 1; font-size: 1.1rem; font-weight: 700; color: var(--wp--preset--color--primary); }
.sec-policy .sec-policy-h:first-of-type { margin-top: 1.4em; }
.sec-policy .sec-policy-item { position: relative; margin: 0 0 .5em; padding-left: 1.2em; }
.sec-policy .sec-policy-item::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--foreground); }

/* 404 */
.sec-404 { text-align: center; }
.sec-404 .sec-big { display: block; font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: .04em; color: rgba(255, 255, 255, .9); }
.sec-404 h1 { margin-top: .4em; }
.sec-404 p { margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  .sec { padding: 0 16px; }
  .sec-panel { padding: 28px 22px; }
  .sec-news { grid-template-columns: 1fr; gap: 18px; }
  .sec-card p { word-break: normal !important; }
  .sec-dl div { grid-template-columns: 1fr; gap: 2px; }
  .sec-hero { padding: 40px 24px; }
  .sec-hero .ib { display: inline; }
  .sec-hero::before { width: 200px; height: 200px; right: -80px; top: -90px; }
  .sec-block, .sec-cta { margin-top: 56px; }
  .sec-stats, .sec-cards { grid-template-columns: 1fr; }
  .sec-stat b { font-size: 1.6rem; }
  .sec-steps { grid-template-columns: 1fr; gap: 14px; }
  .sec-steps li { display: flex; align-items: center; gap: 14px; padding: 0; text-align: left; }
  .sec-steps li::before { margin: 0; }
  .sec-steps li + li::after { display: none; }
}