/* 全体のベース（日本語用） */
* {
    font-family: YakuHanJP, "Zen Kaku Gothic Antique",
        "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",
        sans-serif;
    font-weight: 700 !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-feature-settings: "palt";
    line-height: 1;
}

/* カラーバリエーション */
:root {
    --blue: #135ba4;
    /* ブルー */
    --red: #d82a2a;
    /* レッド */
}

html,
body {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {

    html,
    body {
        overflow-x: hidden;
    }
}

body:lang(en),
[lang="en"],
.en {
    font-family: "Poppins", "Zen Kaku Gothic Antique", sans-serif;
}


html {
    font-size: 62.5%;
    line-height: 1
}


img {
    -webkit-backface-visibility: hidden;
    vertical-align: bottom;
    line-height: 0
}

p,
th,
td,
dt,
dd,
li,
h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #333333;
}

a {
    color: #333333;
    text-decoration: none;
    outline: none;
    border: none;
    transition: 0.3s
}

a:hover {
    text-decoration: none
}

a img {
    outline: none;
    border: none;
    -webkit-backface-visibility: hidden
}

.mb40 {
    margin-bottom: 40px;
}

section .wrap .contents h2 {
    font-size: clamp(22px, 3.2vw, 48px);
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    display: grid;
    grid-row-gap: 0.5em;
    margin-bottom: 0.75em;
}
@media screen and (max-width:768px) {
    section .wrap .contents h2 {
            letter-spacing: 0;
    }
}

section .wrap .contents h3 {
    letter-spacing: 0.1em;
}

section .wrap .contents h2 span {
    font-size: 1.4rem;
    color: #259b6c;
    font-weight: 700;
    letter-spacing: normal;
}

section .wrap .contents a.btn {
    display: inline-grid;
    grid-template-columns: 2.66em auto;
    grid-column-gap: 0.5em;
    justify-content: start;
    align-items: center;
    font-size: 2.4rem;
    font-weight: 700;
}

.section-label {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--black, #000);
    letter-spacing: 0.05em;
    margin-bottom: clamp(8px, 1.8vw, 12px);
}

.section-label::before {
    content: "●";
    margin-right: 6px;
    color: var(--blue);
    font-size: 0.7em;
    line-height: 1;
}

/****************************************
 * 共通：もっと詳しくリンク（link-more）
 ****************************************/
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.8rem;
    font-weight: 600;
    text-decoration: none;
    /* 下線はテキスト側で制御 */
    position: relative;
    -webkit-tap-highlight-color: transparent;
    margin: 40px auto;
}

/* 下線はテキストだけに描画 */
.link-more__text {
    position: relative;
    display: inline-block;
}

.link-more__text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
    transform: scaleX(0);
    /* 初期は非表示 */
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* 丸い矢印ボタン */
.link-more__btn {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    line-height: 1;
    will-change: transform, box-shadow;
    transition:
        transform .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s ease,
        opacity .3s ease;
    font-size: 0;
    /* 文字矢印は使わない */
}

/* SVG 矢印 */
.link-more__btn svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    /* テーマに追従 */
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ホバー時：下線表示＋矢印をスライド＆微拡大（しっとり） */
.link-more:hover .link-more__text::after {
    transform: scaleX(1);
}

.link-more:hover .link-more__btn {
    transform: translateX(10px) scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    opacity: .95;
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {

    .link-more__text::after,
    .link-more__btn {
        transition: none;
    }

    .link-more:hover .link-more__btn {
        transform: none;
        box-shadow: none;
        opacity: 1;
    }
}

/* ===== カラーバリエーション ===== */

/* 黒文字＋黒ボタン＋矢印は白 */
.link-more--black {
    color: #333333;
}

.link-more--black .link-more__btn {
    background: #333333;
    color: #ffffff;
}

/* 白文字＋白ボタン＋矢印は赤 */
.link-more--white {
    color: var(--red);
}

.link-more--white .link-more__btn {
    background: #ffffff;
    color: var(--red) !important;
}

/* 白文字＋白ボタン＋矢印は青 */
.link-more--white2 {
    color: #ffffff;
}

.link-more--white2 .link-more__btn {
    background: #ffffff;
    color: var(--blue) !important;
}

area {
    border: none;
    outline: none
}

.clear {
    clear: both
}

* img {
    max-width: 100%;
    height: auto
}

#main {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative
}

.wrap {
    width: 100%
}

.wrap .contents,
.strengths-wrap .strengths-contents,
.service-wrap .service-contents,
.works-wrap .works-contents,
.contact-wrap .contact-contents,
.news-wrap .news-contents,
.shoukouannai-wrap .shoukouannai-contents {
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 0 auto
}

.wrap .contents p {
    line-height: 1.8;
    /* font-weight: 500 */
}

@media screen and (max-width:768px) {
    .wrap .contents {
        width: calc(100% - 60px)
    }

    .wrap .contents p {
        line-height: 1.6
    }

    #wpfront-scroll-top-container {
        width: 70px;
        right: 10px !important;
        bottom: 90px !important;
    }
}

/* PC/SPの表示切替 */
.pcOnly {
    display: none;
}

.spOnly {
    display: block;
}

@media (min-width: 768px) {
    .pcOnly {
        display: block;
    }

    /* タブレット以上：PC版を表示 */
    .spOnly {
        display: none;
    }
}

.breadcrum {
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 0px auto 40px
}

.breadcrum ul {
    list-style: none
}

.breadcrum li {
    display: inline;
    font-size: 14px;
}

.breadcrum li a {
    color: inherit;
    text-decoration: none
}

.breadcrum li+li:before {
    content: ">";
    margin: 0.5em
}

/****************************************
 * セクション：WORKS（赤／左側を大きく丸めた形）
 ****************************************/

.section-works {
    position: relative;
    color: #fff;
    padding: clamp(64px, 9vw, 200px) 0;
    overflow: visible;
    /* 擬似要素を外に出す */

    /* 形状トークン（必要に応じて調整） */
    --wk-left-inset: clamp(24px, 6vw, 84px);
    /* 左の白額縁 */
    --wk-right-inset: 0px;
    /* 右は端まで赤 */
    --wk-inset-block: clamp(0px, 1.5vw, 16px);
    /* 上下の白額縁 */

    /* 最終的な角丸量（PC） */
    --wk-r-big: 500px;
    /* 左の大きい丸み／右の縦丸み */
    --wk-r-small: 0px;
    /* 右上/右下の小さい丸み */

    /* アニメ用の現在値（初期は四角＝0） */
    --anim-r-big: 0px;
    --anim-r-small: 0px;

    /* アニメ速度（revealのCSS変数が無い環境でも動くようフォールバック） */
    --rv-dur: .9s;
    --rv-ease: cubic-bezier(.15, .85, .2, 1);
    --rv-delay: 0ms;
    /* scroll.js 側で setProperty すれば同期可能 */
}

/* 赤い面（::before） */
.section-works::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--wk-left-inset);
    inset-inline-end: var(--wk-right-inset);
    inset-block: var(--wk-inset-block);
    background: var(--red, #d82a2a);
    z-index: 0;

    /* 角丸はアニメ用変数で描画 */
    border-radius:
        var(--anim-r-big) var(--anim-r-small) var(--anim-r-small) var(--anim-r-big) / var(--anim-r-big) var(--anim-r-small) var(--anim-r-small) var(--anim-r-big);

    /* 四角→角丸のトランジション */
    transition-property: border-radius;
    transition-duration: 1.2s;
    /* ← 0.9s → 1.2s など長めに */
    transition-timing-function: cubic-bezier(.2, .7, .2, 1);
    /* reveal の遅延 + 180ms して、スライド後に丸みが始まる */
    transition-delay: calc(var(--rv-delay, 0ms) + 180ms);
    will-change: border-radius;
}

/* 表示時に最終角丸にスナップ（四角→角丸） */
.section-works.is-visible {
    --anim-r-big: var(--wk-r-big);
    --anim-r-small: var(--wk-r-small);
}

/* 低モーション環境では即時反映 */
@media (prefers-reduced-motion: reduce) {
    .section-works::before {
        transition: none !important;
    }
}

/* 中身は前面に */
.section-works>* {
    position: relative;
    z-index: 1;
}

.section-works .wrap .contents {
    width: calc(100% - 60px);
    max-width: 900px;
    margin: 0 auto;
}

/* 上段：ラベル＋大見出し（白） */
.section-works__header {
    max-width: 900px;
    width: calc(100% - (var(--wk-left-inset) + var(--wk-right-inset)));
    margin: 0 auto clamp(20px, 4vw, 40px);
    text-align: center;
}

.section-works .section-label--light {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    letter-spacing: .05em;
    margin-bottom: clamp(8px, 1.8vw, 12px);
}

.section-works .section-label--light::before {
    content: "●";
    margin-right: 6px;
    color: #fff !important;
    font-size: .7em;
    line-height: 1;
}

.section-works__title {
    font-size: clamp(24px, 4.2vw, 42px);
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .04em;
    color: #fff;
}

/* 下段：左テキスト／右画像 */
.section-works__grid {
    max-width: 900px;
    width: calc(100% - (var(--wk-left-inset) + var(--wk-right-inset)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* 文章を少し広めに */
    gap: clamp(24px, 5vw, 56px);
    align-items: center;
}

.section-works__text {
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .95);
    letter-spacing: .03em;
}

.section-works__text p {
    color: #fff;
}

/* “もっと詳しく”は共通の白版（link-more--white） */
.section-works .link-more {
    margin-top: clamp(16px, 2.5vw, 24px);
}

.section-works .link-more--white {
    color: #fff;
}

.section-works .link-more--white .link-more__btn {
    background: #fff;
    color: #333;
}

/* 画像 */
.section-works__image {
    justify-self: center;
}

.section-works__image img {
    display: block;
    max-width: min(460px, 36vw);
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

/* レスポンシブ */
@media (max-width: 900px) {
    .section-works__grid {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .section-works__image {
        order: 2;
    }

    .section-works__text {
        order: 1;
    }

    .section-works__image img {
        max-width: 100%;
    }
}

/* モバイル時は角丸を小さく＆余白を微調整 */
@media (max-width: 720px) {
    .section-works {
        --wk-left-inset: 16px;
        --wk-right-inset: 0px;
        /* 右は端まで赤 */
        --wk-inset-block: 8px;
        --wk-r-small: 16px;
        --wk-r-big: 24px;
        padding: 48px 0 72px;
    }
}

/* ==== Scroll Reveal 基本 ==== */
/* JSが有効なときだけ初期非表示（FOUC対策） */
.js .reveal {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0), var(--rv-y, 12px), 0) scale(var(--rv-scale, 1));
    transition:
        opacity var(--rv-dur, .8s) cubic-bezier(.2, .6, .2, 1),
        transform var(--rv-dur, .8s) cubic-bezier(.2, .6, .2, 1);
    will-change: opacity, transform;
    filter: var(--rv-filter, none);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* 方向バリアント（data-reveal="..." で切替） */
.reveal[data-reveal="up"] {
    --rv-x: 0;
    --rv-y: 16px;
}

.reveal[data-reveal="down"] {
    --rv-x: 0;
    --rv-y: -16px;
}

.reveal[data-reveal="left"] {
    --rv-x: 16px;
    --rv-y: 0;
}

.reveal[data-reveal="right"] {
    --rv-x: -16px;
    --rv-y: 0;
}

.reveal[data-reveal="zoom"] {
    --rv-scale: .96;
}

/* ふわっと強めにしたい時（うっすらブラー） */
.reveal[data-reveal="soft"] {
    --rv-filter: blur(2px);
}

/* スタッガー遅延（data-reveal-delay="100" などミリ秒） */
.reveal[data-reveal-delay] {
    transition-delay: calc((attr(data-reveal-delay number, 0) * 1ms));
}

/* モーション配慮：アニメを無効化して全表示 */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.is-visible {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ========== Fluid type scale (基準: 360px～1200px / 1rem=10px) ========== */
:root{
  /* 1.6rem（16px）→ SP最小14px～PC16px */
  --fs-16: clamp(1.4rem, calc(1.314rem + 0.238vw), 1.6rem);

  /* 2.0rem（20px）→ 16px～20px */
  --fs-20: clamp(1.6rem, calc(1.429rem + 0.476vw), 2.0rem);

  /* 2.4rem（24px）→ 18px～24px */
  --fs-24: clamp(1.8rem, calc(1.543rem + 0.714vw), 2.4rem);

  /* 3.2rem（32px）→ 24px～32px */
  --fs-32: clamp(2.4rem, calc(2.057rem + 0.952vw), 3.2rem);

  /* 3.6rem（36px）→ 28px～36px */
  --fs-36: clamp(2.8rem, calc(2.457rem + 0.952vw), 3.6rem);

  /* 4.0rem（40px）→ 30px～40px */
  --fs-40: clamp(3.0rem, calc(2.571rem + 1.191vw), 4.0rem);

  /* 4.8rem（48px）→ 32px～48px */
  --fs-48: clamp(3.2rem, calc(2.514rem + 1.905vw), 4.8rem);

  /* お好みで行間のトークンも用意（任意） */
  --lh-tight: 1.3;
  --lh-body : 1.8;
  --lh-loose: 2.0;
}

/* ユーティリティ（必要なら） */
.fs-16{ font-size: var(--fs-16); }
.fs-20{ font-size: var(--fs-20); }
.fs-24{ font-size: var(--fs-24); }
.fs-32{ font-size: var(--fs-32); }
.fs-36{ font-size: var(--fs-36); }
.fs-40{ font-size: var(--fs-40); }
.fs-48{ font-size: var(--fs-48); }
.lh-tight{ line-height: var(--lh-tight); }
.lh-body { line-height: var(--lh-body);  }
.lh-loose{ line-height: var(--lh-loose); }