/*全要素のサイズ計算方法を統一*/
*{
    box-sizing:border-box
}

/*ページ内リンクを押したときになめらかにスクロール*/
html{
    scroll-behavior:smooth
}

/* HOME内の補足文・日付などに使うグレー文字をネイビーへ統一 */
.home-page{
    --muted:#104d76;
}

.home-page .section-heading > p,
.home-page .intro > p:not(.eyebrow),
.home-page .service-grid p,
.home-page .column-date,
.home-page .news-date,
.home-page .results p:last-child{
    font-weight:500;
}

/*会社ロゴ画像*/
.brand-logo{
    height:45px;
    width:auto;
    padding:5px 0
}

/*ヘッダーのメニュー*/
.site-header nav{
    display:flex;
    gap:23px;
    margin-left:auto
}

/*ヘッダーメニューの文字*/
.site-header nav a{
    color:var(--ink);
    font-size:14px;
    text-decoration:none;
    white-space:nowrap
}

/*右側の問い合わせ・電話番号*/
.header-contact{
    color:var(--navy);
    font-size:12px;
    text-decoration:none;
    border-left:1px solid #dce3e1;
    padding-left:25px
}

/*ヘッダーの電話番号*/
.header-contact b{
    display:block;
    font:600 18px Outfit,sans-serif;
    letter-spacing:.05em
}

/*モバイルメニューボタン*/
.mobile-menu-btn{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    gap:5px
}

/*モバイルメニューボタンの線*/
.mobile-menu-btn span{
    display:block;
    width:24px;
    height:2px;
    background:var(--blue);
    transition:all 0.3s ease
}

/*モバイルメニューボタンのアニメーション（開いた状態）*/
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1){
    transform:rotate(45deg) translate(5px, 5px)
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(2){
    opacity:0
}

.mobile-menu-btn[aria-expanded="true"] span:nth-child(3){
    transform:rotate(-45deg) translate(5px, -5px)
}

/*モバイルメニュー（ドロップダウン）*/
.mobile-menu{
    display:none;
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:20px;
    border-bottom:1px solid #e7eceb;
    z-index:999;
    gap:0;
    max-height:calc(100vh - 64px);
    overflow-y:auto
}

/*モバイルメニューのリンク*/
.mobile-menu a{
    display:block;
    padding:15px 20px;
    color:var(--ink);
    text-decoration:none;
    font-size:16px;
    border-bottom:1px solid #f0f0f0;
    transition:background 0.2s ease
}

.mobile-menu a:hover{
    background:#f8fbfd
}

.mobile-menu a:last-child{
    border-bottom:none
}

/*モバイルメニューが開いている状態*/
.mobile-menu.open{
    display:flex
}

/*ホーム上部*/
/*ホーム上部全体*/
.hero{
    min-height:580px;
    background:url('images/photo8.webp') left bottom/65% no-repeat;
    background-color:#61b1e4;
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:50px 7vw 40px
}

/*ホーム上部右側にある円形の装飾*/
.hero:before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border:1px solid rgba(186,229,229,.25);
    border-radius:50%;
    right:-200px;
    top:-220px
}

/*photo8＋背景色エリアへのオーバーレイ（kokoro.webpの斜め境界に沿ってクリップ）*/
.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(17, 114, 199, 0.8)  0%,
        rgba(17, 114, 199,.55) 30%,
        rgba(24, 112, 188,.3) 50%,
        rgba(30, 112, 180,.15) 65%,
        rgba(47, 121, 185, 0.1) 80%,
        rgba(49, 135, 209, 0.06) 100%
    );
    clip-path:polygon(0 0, 68.5% 0, 58.6% 100%, 0 100%);
    z-index:0;
    pointer-events:none
}

/*右側の斜め画像*/
.hero-right-image{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:45%;
    overflow:hidden;
    z-index:2
}

.hero-kokoro{
    width:100%;
    height:100%;
    object-fit:cover;
    clip-path:polygon(30% 0, 100% 0, 100% 100%, 8% 100%)
}

/*2枚の画像の境界にまたがる円形テキスト*/
.hero-circle-text{
    position:absolute;
    left:63.5%;
    top:48%;
    z-index:3;
    width:min(280px, 26vw);
    height:min(280px, 26vw);
    transform:translate(-50%, -50%);
    pointer-events:none;
}

.hero-circle-text svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
    /* SVG自体を回転させる */
    animation: hero-circle-spin 20s linear infinite;
    -webkit-animation: hero-circle-spin 20s linear infinite;
}

.hero-circle-text text{
    font-family:'Noto Sans JP',sans-serif;
    font-weight:500;
    font-size:26px;
    letter-spacing:.15em;
    fill:#fff
}

/* SVGを回転させるアニメーション */
@keyframes hero-circle-spin{
    0%{ transform: rotate(360deg); }
    100%{ transform: rotate(0deg); }
}

@-webkit-keyframes hero-circle-spin{
    0%{ -webkit-transform: rotate(360deg); }
    100%{ -webkit-transform: rotate(0deg); }
}

@media (prefers-reduced-motion:reduce){
    .hero-circle-text{
        animation:none;
        -webkit-animation:none;
    }
}

/*ホーム上部の文章部分*/
.hero-copy{
    position:relative;
    z-index:1;
    max-width:690px
}

/*ホーム上部の英語の小見出し*/
.hero .eyebrow{
    color:#fff;
    position:relative;
    top:2px
}

/*ホーム上部のメイン見出し*/
.hero h1{
    font-family:'IBM Plex Sans JP',sans-serif;
    font-weight:400;
    font-size:clamp(36px,4vw,64px);
    line-height:1.25;
    letter-spacing:.03em;
    margin:0 0 25px
}

.hero-title-mobile,
.hero-description-mobile{
    display:none
}

/*PC画面で見出しの改行を防ぐ*/
@media(min-width:1024px){
    .hero h1{
        white-space:nowrap
    }
}

/*メイン見出し内の「住まいの安心」*/
.hero h1 em{
    font-style:normal;
    color:#8ed6d4
}

/*メイン見出し下の説明文*/
.hero-copy>p:not(.eyebrow){
    font-size:16px;
    line-height:2;
    color:#fff !important
}

/*「ユニットバス組立のシーテック」のフォントサイズを1.7倍に*/
.hero-copy>p:not(.eyebrow):last-of-type{
    font-size:21px;
    font-weight:500;
    line-height:1.6;
    margin-top:-12px
}

/*ホーム上部の２ボタンの配置*/
.hero-actions{
    display:flex;
    gap:15px;
    margin-top:35px
}

/*ボタン共通設定*/
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    padding:13px 25px;
    border:1px solid transparent;
    text-decoration:none;
    font-size:14px;
    cursor:pointer
}

/*青いボタン*/
.primary{
    background:var(--blue);
    color:#fff
}

/*透明なボタン*/
.ghost{
    border-color:#93a9b2;
    color:#fff
}

/*ボタン内の矢印*/
.button span{
    font-size:20px
}

.hero-slider-area{
    position:relative;
}

/*画像スライダー*/
.image-slider{
    position:absolute;
    left:0;
    right:0;
    bottom:-280px;
    width:100%;
    z-index:1;
    overflow:hidden;
    padding:0 24px 28px 0;
}

.slider-track{
    display:flex;
    width:max-content;
    animation:scroll 60s linear infinite;
}

.slider-photo{
    flex:0 0 auto;
    width:350px;
    height:auto;
    border-radius:8px;
    box-shadow:12px 12px 0 rgba(135, 180, 200, 0.5);
    margin-right:40px;
}

@keyframes scroll{
    0%{
        transform:translateX(-50%);
    }
    100%{
        transform:translateX(0);
    }
}

/*スマホ用画像スライダー調整*/
@media(max-width:768px){
    /*スマホ版water.webpは下部を隠さない*/
    .intro-water{
        bottom:0
    }

    .image-slider{
        position:relative;
        bottom:auto;
        padding:20px 16px;
        margin-top:-226px;
        z-index:1;
    }
    
    .slider-photo{
        width:280px;
        margin-right:24px;
        box-shadow:8px 8px 0 rgba(135, 180, 200, 0.5);
    }
}


/*お役立ちコラム（HOME用）*/
.column{
    margin:auto
}

.column.section,
.news.section{
    padding-top:70px;
    padding-bottom:70px
}

.section-heading{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
    align-items:end;
    gap:24px;
    margin-bottom:22px
}

.section-heading>div{
    min-width:0
}

.section-heading>p{
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    margin:0;
    max-width:420px;
    text-align:left;
    justify-self:end
}

.services-description-mobile{
    display:none
}

.news-more{
    display:flex !important;
    justify-content:center;
    align-items:center;
    width:max-content
    /* marginはここでは指定しない。お知らせ(HOME用)セクション側だけで制御 */
}

/*お知らせ（HOME用）*/
.news{
    max-width:none;
    width:100%;
    margin:0;
    background:#fff
}

.news-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(220px, 1fr) minmax(0, 2.2fr);
    align-items:start;
    gap:40px
}

.news-inner .section-heading{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
    align-items:end;
    gap:24px;
    margin:0;
    padding-top:4px;
    width:100%
}

.news-inner .section-heading>p{
    margin:0;
    justify-self:end
}

.news h2{
    font-size:clamp(28px,3.2vw,46px);
    line-height:1.45;
    letter-spacing:.05em;
    margin:0;
    color:var(--ink);
    font-weight:700
}

.news-list{
    display:flex;
    flex-direction:column;
    gap:0;
    width:min(800px, 100%);
    margin:0;
    flex:1 1 auto
}

.news-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 25px;
    background:transparent;
    border-bottom:1px solid rgba(21,124,158,.8);
    text-decoration:none;
    transition:all 0.3s ease
}

.news-item:hover{
    background:#f4fbfd
}

.news-date{
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    margin-right:20px;
    flex-shrink:0;
    width:80px
}

.news-title{
    flex:1;
    font-size:15px;
    color:var(--ink);
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
    min-width:0
}

.news-arrow{
    font-size:18px;
    color:var(--blue);
    font-weight:700;
    margin-left:20px;
    white-space:nowrap;
    flex-shrink:0;
    width:30px
}

.news-more{
    margin-top:15px;
    margin-left:45px;
    display:flex;
    align-self:flex-start
}

/*スマホ版コラム*/
@media(max-width:750px){
    .news-heading-col{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:end;
        gap:12px
    }

    .news-heading-col .section-heading{
        margin:0;
        width:auto
    }

    .news-heading-col h2{
        font-size:20px;
        white-space:nowrap
    }

    .news-heading-col .news-more{
        margin:0;
        align-self:end;
        position:relative;
        top:-9px;
        font-size:11px;
        padding:6px 12px
    }

    .news-inner{
        display:block
    }

    .news-inner .section-heading{
        width:auto;
        margin-bottom:0
    }

    .news-list{
        width:100%;
        max-width:800px;
        flex:0 1 auto
    }

    .column-item{
        flex-direction:column;
        align-items:flex-start;
        padding:15px 20px;
        width:100%;
        overflow:hidden;
    }

    .column-date{
        margin-right:0;
        margin-bottom:10px;
    }

    .column-title{
        width:100%;
        max-width:100%;
        min-width:0;
        margin-bottom:10px;
        font-size:14px;
    }

    .column-arrow{
        margin-left:0;
        align-self:flex-end;
    }
}

/*ホーム上部一番下の会社情報*/
.hero-bottom{
    position:absolute;
    bottom:27px;
    left:7vw;
    right:7vw;
    z-index:1;
    display:flex;
    justify-content:space-between;
    color:#aabfc7;
    font-size:11px
}

/*各セクションの基本的な余白*/
.section{
    padding:110px 8vw
}

/*会社紹介セクションの上余白を広げる・水面画像を置くため下部にも余白を確保 */
.intro.section{
    position:relative;
    padding-top:305px;
    padding-bottom:clamp(45px, 20vw, 275px);
    overflow:hidden
}

/*会社紹介・メッセージ*/
/*会社紹介全体*/
.intro{
    text-align:center;
    padding-top:15px;
    position:relative
}

.intro-content{
    max-width:980px;
    margin:auto
}

/*各セクションの大見出し*/
.intro h2,.section h2,.strength h2,.recruit h2{
    font-size:clamp(28px,3.2vw,46px);
    line-height:1.45;
    letter-spacing:.05em;
    margin:0 0 25px
}

.intro .eyebrow{
    margin-top:-1px !important
}

/*会社紹介の説明文・変更後：画像を追加しても説明文だけに適用されるようにする */
.intro>p:not(.eyebrow){
    max-width:680px;
    margin:auto;
    color:var(--muted);
    font-size:15px;
    margin-top:-9px
}

.intro-description-mobile{
    display:none
}

/* OUR PROMISE下部の水面画像 */
.intro-water{
    position:absolute;
    bottom:-55px;
    left:50%;
    display:block;
    width:100vw;
    max-width:none;
    height:auto;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:-1;
    opacity:0;
    transition:opacity 0.3s ease
}
.intro-water.loaded{
    opacity:1
}

/*３サービスを横３列に配置*/
.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

/*各サービスのパネル*/
.service-grid article{
    background:var(--paper);
    padding:35px 30px
}

/*サービスアイテム（背景画像付き）*/
.service-item{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center
}

.service-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(17,45,66,0.6);
    border-radius:8px
}

.service-item h3{
    position:relative;
    z-index:1;
    color:#fff;
    font-size:32px;
    margin:0
}

/*サービス番号01・02・03*/
.number{
    font:600 14px Outfit,sans-serif;
    color:var(--blue)
}

/*サービス名*/
.service-grid .service-item h3{
    font-size:clamp(30px, 2.6vw, 38px);
    margin:0;
}

.service-number,
.service-arrow{
    display:none;
}

/* HOME・業務内容：見出しと3つのサービス画像を横並びにする */
@media(min-width:601px){
    .services{
        display:grid;
        grid-template-columns:minmax(170px, .75fr) minmax(0, 2.25fr);
        grid-template-rows:auto auto;
        column-gap:20px;
        align-items:center;
        background:#fff;
        padding:60px 6vw;
    }

    .services .section-heading{
        display:block;
        grid-column:1;
        grid-row:1;
        margin:0;
    }

    .services .section-heading > p{
        margin-top:18px;
        text-align:left;
    }

    .services .service-grid{
        grid-column:2;
        grid-row:1 / span 2;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:0;
        margin:0;
    }

    .services .service-item{
        min-height:290px;
        width:108%;
        padding:20px 26px;
        align-items:flex-start;
        justify-content:flex-end;
        background-size:auto 100%;
        background-position:center top;
        clip-path:polygon(16% 0, 100% 0, 84% 100%, 0 100%);
    }

    .services .service-item:not(:first-child){
        margin-left:-6%;
    }

    .services .service-item:nth-child(2){
        transform:none;
        left:10px;
    }

    .services .service-item::before{
        border-radius:0;
        background:linear-gradient(
            to bottom,
            rgba(17,45,66,.08) 0%,
            rgba(17,45,66,.28) 48%,
            rgba(17,45,66,.76) 100%
        );
    }

    .services .service-item h3{
        z-index:1;
        position:absolute;
        top:auto;
        right:auto;
        bottom:28px;
        left:34px;
        font-size:19px;
        line-height:1;
        margin:0;
        text-align:left;
    }

    .services .service-number{
        display:block;
        position:absolute;
        top:auto;
        right:auto;
        bottom:58px;
        left:34px;
        z-index:1;
        color:#fff;
        font:500 18px/1 Outfit,sans-serif;
    }

    .services > .text-link{
        grid-column:1;
        grid-row:2;
        align-self:start;
        margin-top:22px;
    }
}

/*サービスの説明文*/
.service-grid p{
    font-size:14px;
    color:var(--muted);
    margin:0 0 18px
}

/*サービス内容一覧*/
.service-grid ul{
    list-style:none;
    padding:0;
    margin:0;
    border-top:1px solid #d8dfdc
}

/*サービス内容一覧の各項目*/
.service-grid li{
    padding:8px 0;
    border-bottom:1px solid #d8dfdc;
    font-size:13px
}

/*サービス内容一覧の先頭に「-」を表示*/
.service-grid li:before{
    content:"-";
    color:var(--blue);
    padding-right:8px
}

/*選ばれる理由*/
/*選ばれる理由全体を左右２列に配置*/
.strength{
    display:grid;
    grid-template-columns:2fr 3fr;
    background:var(--navy);
    color:#fff
}

/*選ばれる理由の左側画像*/
.strength-image{
    min-height:0;
    background:url("images/photo4.webp") center/auto 100% no-repeat;
    position:relative
}

/*選ばれる理由の右側*/
.strength-copy{
    padding:clamp(28px,3.5vw,55px) 9%
}

/*選ばれる理由の英語の小見出し*/
.strength-copy .eyebrow{
    color:#91d4d8
}

/*各「選ばれる理由」*/
.reason{
    display:grid;
    grid-template-columns:clamp(50px,4.2vw,62px) minmax(0,1fr);
    column-gap:clamp(20px,2vw,30px);
}

/*理由番号。白い円で大きく見せる*/
.reason b{
    display:grid;
    place-items:center;
    width:clamp(50px,4.2vw,62px);
    aspect-ratio:1;
    margin-top:clamp(10px,1.2vw,16px);
    border:1px solid #fff;
    border-radius:50%;
    color:#fff;
    font:600 clamp(19px,1.6vw,23px)/1 Outfit,sans-serif;
}

/*文章側だけに区切り線を置き、番号の円と離す*/
.reason>div{
    min-width:0;
    padding:clamp(10px,1.2vw,16px) 0;
    border-top:1px solid rgba(255,255,255,.4)
}

/* 最初の理由の上には区切り線を表示しない */
.reason:first-of-type>div{
    border-top:none;
}

/*理由の見出し*/
.reason h3{
    font-size:clamp(15px,1.25vw,18px);
    margin:0 0 3px
}

/*理由の説明文*/
.reason p{
    font-size:clamp(11px,.9vw,13px);
    line-height:1.65;
    color:#fff;
    font-weight:500;
    margin:0
}

/* 写真高に合わせて、見出しもコンパクトに収める */
.strength-copy h2{
    font-size:clamp(22px,2.5vw,34px);
    margin-bottom:clamp(12px,1.5vw,20px);
}

/* PC：写真の左下に見出しを重ね、必要な範囲だけを暗くする */
@media(min-width:901px){
    .strength{
        position:relative;
    }

    .strength-image:after{
        content:"";
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:clamp(150px,16vw,230px);
        background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0));
        pointer-events:none;
    }

    .strength-copy>.eyebrow,
    .strength-copy>h2{
        position:absolute;
        left:clamp(28px,4vw,70px);
        z-index:1;
        width:min(32vw,300px);
        color:#fff;
    }

    .strength-copy>.eyebrow{
        bottom:clamp(90px,8vw,125px);
        margin:0;
    }

    .strength-copy>h2{
        bottom:clamp(48px,4vw,68px);
        margin:0;
    }
}

/*スマホ版*/
@media(max-width:900px){
    /* 1. セクション全体を縦並びにする */
    .strength{
        display: flex;
        flex-direction: column;
    }

    /* 2. 画像エリアの高さと背景設定 */
    .strength-image{
        position: relative;
        min-height: 380px; /* 画像の高さ（必要に応じて調整） */
        background-size: cover;
    }

    /* 3. 画像の上に敷く黒グラデーション */
    .strength-image::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 180px;
        background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
        pointer-events: none;
        z-index: 1;
    }

    /* 4. 【重要】右側のコピー部分を一度Flexboxにして、中の見出し（eyebrowとh2）を「一番上に強制移動」させる */
    .strength-copy{
        display: flex;
        flex-direction: column;
    }

    /* 5. `.strength-copy` の中にある最初の2つ（eyebrowとh2）を、CSSの力で強制的に画像のところへ飛ばす */
    .strength-copy > .eyebrow,
    .strength-copy > h2{
        position: absolute;
        z-index: 5;
        color: #fff;
        margin: 0;
        left: 20px;
        width: calc(100% - 40px);
    }

    /* 位置の微調整（.strength-image を基準に絶対配置させる） */
    .strength-copy > .eyebrow{
        /* 画像エリアの下からの距離に合わせて調整 */
        bottom: 75px; 
        font-size: 11px;
    }

    .strength-copy > h2{
        bottom: 30px;
        font-size: 20px;
    }
}

/*施工実績*/
/*施工実績全体*/
.results{
    background:#ccecee;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px
}

/*施工実績の大見出し*/
.results h2{
    margin-bottom:10px
}

/*施工実績の説明文*/
.results p:last-child{
    font-size:14px;
    color:#45636c
}

.home-page .results p:last-child{
    color:var(--muted);
    font-weight:500;
}

/*施工台数を横並びに配置*/
.result-numbers{
    display:flex;
    gap:30px
}

/*各年の施工台数*/
.result-numbers div{
    border-left:1px solid #6297a1;
    padding-left:20px
}

/*施工台数の大きな数字*/
.result-numbers strong{
    font:600 58px/1 Outfit,sans-serif;
    display:block
}

/*「２０２５年　施工台数」など*/
.result-numbers span{
    font-size:11px
}

/*会社概要*/
/*会社概要全体*/
.company{
    max-width:1100px;
    margin:auto
}

/* HOME：ABOUT US を写真背景のメッセージセクションにする */
.home-page .company.section{
    max-width:none;
    min-height:680px;
    margin:0;
    padding:clamp(72px,8vw,120px) max(8vw,calc((100vw - 1280px) / 2));
    background:
        linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 43%,rgba(0,0,0,.28) 62%,rgba(0,0,0,0) 82%),
        url("images/about.webp") center/cover no-repeat;
    color:#fff;
    text-align:left;
}

/* ABOUT US 内の文字は左半分に収め、すべて白で表示 */
.home-page .company.section .eyebrow,
.home-page .company.section h2,
.home-page .company.section .company-message,
.home-page .company.section .text-link{
    width:min(46%,620px);
    color:#fff;
    text-align:left;
}

.home-page .company.section .eyebrow{
    margin-bottom:10px;
}

.home-page .company.section h2{
    margin-bottom:28px;
}

.home-page .company.section .company-message p{
    margin:0 0 1em;
    font-size:clamp(13px,1.05vw,16px);
    line-height:1.8;
}

.home-page .company.section .text-link{
    display:inline-flex;
    margin-top:10px;
    border-color:rgba(255,255,255,.72);
}

.home-page .company.section .text-link span{
    color:#fff;
}

/*会社概要の見出し*/
.company h2{
    margin-bottom:40px
}

/*会社情報一覧*/
.company dl{
    margin:0;
    border-top:1px solid #ccd6d3
}

/*「商号」「所在地」などの項目名*/
.company dt{
    font-weight:700
}

/*会社情報の内容*/
.company dd{
    margin:0
}

/*採用情報セクション*/
.recruit-section{
    margin-bottom:80px
}

.recruit-section h2{
    font-size:clamp(28px,3.2vw,46px);
    line-height:1.45;
    letter-spacing:.05em;
    margin:0 0 20px;
    color:var(--ink);
    font-weight:400
}

.recruit-section p{
    font-size:15px;
    line-height:1.8;
    margin:0;
    color:var(--ink)
}

/*採用案内*/
/*採用案内全体*/
.recruit{
    padding:95px 8vw;
    background:
        linear-gradient(rgba(17,45,66,.58), rgba(17,45,66,.58)),
        url("images/team.webp") center/cover no-repeat;
    color:#fff;
    text-align:center;
}

/*採用案内の英語の小見出し*/
.recruit .eyebrow{
    color:#d4f1f1
}

/*採用案内の大見出し*/
.recruit h2{
    margin-bottom:10px
}

/*採用案内の説明文*/
.recruit>p:not(.eyebrow){
    font-size:14px;
    margin:0 0 28px
}

/*採用案内の白いボタン*/
.light{
    background:#fff;
    color:var(--blue)
}

/*請負協力*/
/*請負協力全体*/
.partner{
    padding:95px 8vw;
    background:
        linear-gradient(rgba(17,45,66,.58), rgba(17,45,66,.58)),
        url("images/partner-bg.webp") center/cover no-repeat;
    color:#fff;
    text-align:center;
}

/*請負協力の英語の小見出し*/
.partner .eyebrow{
    color:#d4f1f1
}

/*請負協力の大見出し*/
.partner h2{
    margin-bottom:10px
}

/*請負協力の説明文*/
.partner>p:not(.eyebrow){
    font-size:14px;
    margin:0 0 28px
}

/*請負協力の白いボタン*/
.light{
    background:#fff;
    color:var(--blue)
}

/*フッター内の会社ロゴ画像のサイズを統一*/
footer .brand-logo{
    height:45px;
    width:auto
}

/*会社の連絡先情報*/
.footer-info{
    display:flex;
    flex-direction:column;
    gap:14px
}

/*住所・最寄り駅*/
.footer-address{
    margin:0;
    font-size:13px;
    line-height:1.9;
    color:#fff
}

/*フッターの電話番号*/
.footer-tel{
    color:#fff;
    font:600 18px/1 Outfit,sans-serif;
    letter-spacing:.05em;
    text-decoration:none;
    margin-bottom:12px
}

/*営業時間・FAX・メール*/
.footer-meta{
    margin:0;
    font-size:12px;
    line-height:2;
    color:#fff
}

/*メールアドレスのリンク*/
.footer-meta a{
    color:#fff;
    text-decoration:none
}

/*フッター内のリンクとボタン*/
.footer-links{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start
}

/*フッターのプライバシーポリシーリンク*/
.footer-links a:not(.footer-top){
    color:#fff;
    font-size:13px;
    text-decoration:none
}

/*今開いているフッターリンクを強調*/
.footer-links a[aria-current="page"]{
    font-weight:700
}

/*ページ先頭へ戻るボタン*/
.footer-top{
    padding:11px 20px;
    border:1px solid #6d8a94;
    color:#fff;
    font-size:14px;
    letter-spacing:.05em;
    text-decoration:none
}

/*フッターの著作権表記*/
.footer-copy{
    margin:0;
    font:11px Outfit,sans-serif;
    letter-spacing:.1em;
    color:#a4bac0;
    grid-column:1 / -1;
    grid-row:2;
    justify-self:end;
    align-self:end
}

/*タブレット用デザイン。画面幅900px以下のとき適用*/
@media(max-width:900px){
    
    /*ヘッダーの左右余白*/
    .site-header{
        padding:0 5vw;
        height:64px !important
    }
    
    /*上部メニューを非表示*/
    .site-header nav{
        display:none
    }
    
    /*モバイルメニューボタンを表示*/
    .mobile-menu-btn{
        display:flex;
        margin-left:auto
    }
    
    /*問い合わせ・電話番号を非表示*/
    .header-contact{
        display:none
    }
    
    /*ホーム上部の余白*/
    .hero{
        padding:80px 7vw 260px
    }

    /*タブレット版では右側画像を非表示または調整*/
    .hero-right-image{
        display:none
    }

    .hero-circle-text{
        display:none
    }

    /*タブレット版画像スライダー*/
    .image-slider{
        bottom:-140px
    }
    
    /*ホーム上部下部の会社情報*/
    .hero-bottom{
        font-size:9px
    }
    
    /*選ばれる理由を1列に変更*/
    .strength{
        grid-template-columns:1fr
    }
    
    /*選ばれる理由の画像の高さ*/
    .strength-image{
        min-height:370px
    }
    
    /*選ばれる理由の文章部分の余白*/
    .strength-copy{
        padding:70px 10%
    }
    
    /*施工実績を縦方向の配置に変更*/
    .results{
        display:block
    }
    
    /*施工台数上部の余白*/
    .result-numbers{
        margin-top:35px
    }
    
    /*問い合わせ部分の間隔*/
    .contact{gap:45px}
}

/*iPad用デザイン。画面幅600px以上900px以下のとき適用*/
@media(min-width:600px) and (max-width:900px){
    
}

/*iPad横表示用デザイン。画面幅900px以上1200px以下のとき適用*/
@media(min-width:900px) and (max-width:1200px){
    
}

/*スマホ用デザイン。画面幅600px以下のときに適用*/
@media(max-width:600px){

    /*スマホ版ヘッダー*/
    .site-header{
        height:64px
    }
    
    /*メニューを非表示（確実に）*/
    .site-header nav{
        display:none !important
    }
    
    /*スマホ版会社名*/
    .brand strong{
        font-size:13px
    }

    /*スマホ版ABOUT USセクションの本文調整*/
    .home-page .company.section{
        min-height:0;
        padding:64px 7vw 70px;
        background-position:center;
        background-image:
            linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.78) 58%,rgba(0,0,0,.48) 100%),
            url("images/about.webp");
    }

    .home-page .company.section .eyebrow,
    .home-page .company.section h2,
    .home-page .company.section .company-message,
    .home-page .company.section .text-link{
        width:100%;
    }

    .home-page .company.section .company-message p{
        padding:0 !important;
        font-size:13px !important;
        line-height:1.7 !important;
        margin:0 0 1em !important;
    }
    
    /*スマホ版「STH」*/
    .brand span{
        font-size:15px
    }
    .brand span b{
        font-size:23px
    }

    /*スマホ版water.webpは下部を隠さない*/
    .intro-water{
        bottom:0
    }

    /*スマホ版introセクションのoverflowを解除*/
    .intro.section{
        overflow:visible
    }

    /*スマホ版ホーム上部*/
    .hero{
        min-height:560px;
        padding:50px 7vw 30px
    }

    /*スマホ版画像スライダー*/
    .image-slider{
        bottom:-196px
    }

    .slider-photo{
        width:200px;
        margin-right:24px
    }

    /*スマホ版OUR PROMISEと水面画像の余白*/
    .intro.section{
        padding-top:200px;
        padding-bottom:120px
    }

    .intro-description-desktop{
        display:none
    }

    .intro-description-mobile{
        display:inline
    }
    
    /*スマホ版メイン見出し*/
    .hero h1{
        font-size:32px
    }

    .hero-title-desktop,
    .hero-description-desktop{
        display:none
    }

    .hero-title-mobile,
    .hero-description-mobile{
        display:inline
    }

    /*スマホ版メイン見出し下の説明文*/
    .hero-copy>p:not(.eyebrow){
        font-size:15px
    }
    
    /*スマホでは説明文の改行を解除*/
    .hero-copy>p br{
        display:none
    }

    .hero-copy > p .hero-description-mobile br{
        display:block
    }
    
    /*スマホ版ボタン同士の間隔*/
    .hero-actions{
        gap:8px
    }
    
    /*スマホ版ホーム上部のボタン*/
    .hero-actions .button{
        flex:1;
        padding:11px 8px;
        gap:9px;
        font-size:12px;
        white-space:nowrap
    }

    /* スマホ版HOME：メインコピーを少し小さく */
    .hero h1{
        font-size:32px;
        line-height:1.3;
    }
    
    /* 「神奈川・東京のユニットバス組立…」の文を小さく */
    .hero-copy > p:not(.eyebrow):not(.hero-area){
        font-size:20px;
        line-height:1.5;
        margin-top:-8px;
    }
    
    /* スマホ版OUR PROMISEの見出しを小さく */
    .intro h2{
        font-size:20px;
        line-height:1.5;
        letter-spacing:.03em;
    }
    
    /*スマホ版ホーム上部下部の会社情報*/
    .hero-bottom{
        bottom:18px;
        display:block;
        line-height:1.7
    }
    
    /*スマホでは建設業許可の表示を非表示*/
    .hero-bottom span:last-child{
        display:none
    }

    /*
      スマホ版HOMEのファーストビュー
      上半分は街並み（photo8）、下半分は浴室（kokoro）を見せ、
      コピーと円形テキストは二つの写真の境目に重ねる。
    */
    .hero{
        min-height:620px;
        padding:92px 8vw 30px;
        background:#61b1e4;
        background-color:#61b1e4;
        transform:translateY(-40px);
        margin-bottom:-40px;
    }

    .hero:before{
        display:block;
        z-index:3;
        inset:0 0 auto;
        width:100%;
        height:90%;
        border:0;
        border-radius:0;
        background:url('images/photo8.webp') center calc(100% - 112px) / 100% 45vw no-repeat;
        clip-path:polygon(0 0, 100% 0, 100% 70%, 0 80%);
    }

    .hero:after{
        z-index:4;
        clip-path:polygon(0 0, 100% 0, 100% 63.1%, 0 70%);
        background:linear-gradient(
            to bottom,
            rgba(17, 114, 199, 0.8) 0%,
            rgba(17, 114, 199, .55) 30%,
            rgba(24, 112, 188, .3) 50%,
            rgba(30, 112, 180, .15) 65%,
            rgba(47, 121, 185, .1) 80%,
            rgba(49, 135, 209, .06) 100%
        );
    }

    .hero-copy{
        z-index:5;
    }

    .hero .eyebrow{
        margin-bottom:12px;
        font-size:10px;
        letter-spacing:.13em;
    }

    .hero h1{
        font-size:31px;
        line-height:1.38;
        margin-bottom:18px;
        letter-spacing:.04em;
    }

    .hero-copy > p:not(.eyebrow):not(.hero-area){
        font-size:13px;
        line-height:1.65;
        margin-top:0;
    }

    .hero-right-image{
        display:block;
        top:63%;
        right:auto;
        bottom:auto;
        left:0;
        width:100%;
        height:37%;
        z-index:0;
        clip-path:polygon(0 24%, 100% 0, 100% 100%, 0 100%);
    }

    .hero-kokoro{
        clip-path:none;
        object-position:center 45%;
    }

    .hero-circle-text{
        display:block;
        top:65%;
        left:90%;
        z-index:6;
        width:290px;
        height:290px;
    }

    .hero-circle-text text{
        font-weight:500;
        font-size:26px;
        fill:#fff;
        stroke:none;
    }
    
    /*スマホ版各セクションの余白*/
    .section{
        padding:75px 7vw
    }

    /*スマホ版各セクションの見出しを小さく*/
    .section h2{
        font-size:22px
    }

    /*スマホ版「選ばれる理由」「募集要項」「お役立ちコラム」の見出しをさらに小さく*/
    .strength h2,
    .recruit h2,
    .column h2,
    .home-info-link h3{
        font-size:18px !important
    }

    /*スマホ版home-info-linkの余白を狭める*/
    .home-info-link .eyebrow{
        margin-bottom:2px !important
    }

    /*スマホ版home-info-linkのボタン横幅を調整*/
    .home-info-link .button{
        padding:6px 12px !important;
        font-size:12px !important
    }

    /*スマホ版業務内容パネルの見出しを小さく*/
    .service-item h3{
        font-size:24px
    }

    /*スマホ版選ばれる理由の見出しを小さく*/
    .reason h3{
        font-size:16px
    }

    /*スマホ版採用・パートナーセクションの見出しを小さく*/
    .recruit h2,
    .partner h2{
        font-size:22px
    }

    /*スマホ版業務内容の上余白*/
    .services.section{
        padding-top:45px
    }
    
    /*事業内容の見出しを縦配置に変更*/
    .section-heading{
        display:block
    }

    /*スマホ版SERVICEの見出しと説明文を横並びに配置*/
    .services .section-heading{
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        align-items:end;
        gap:12px
    }

    .services .section-heading>p{
        margin:0;
        text-align:right
    }

    .services-description-desktop{
        display:none
    }

    .services-description-mobile{
        display:inline
    }
    
    /*事業内容の説明文上部の余白*/
    .section-heading>p{
        margin-top:-5px
    }
    
    /*３サービスを１列表示に変更*/
    .service-grid{
        grid-template-columns:1fr
    }

    /*スマホ版業務内容パネルをコンパクトにする*/
    .services .service-item{
        min-height:120px;
        padding:33px 30px;
        border-radius:8px
    }
    
    /*スマホ版「選ばれる理由」の画像*/
    .strength-image{
        min-height:270px
    }
    
    /*選ばれる理由の文章部分*/
    .strength-copy{
        padding:70px 7vw
    }
    
    /*施工台数を３列に配置*/
    .result-numbers{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
    }

    .result-numbers div{
    padding-left:10px;
    min-width:0;
    }
    
    /*施工台数の各項目*/
    .result-numbers div{
        padding-left:10px
    }
    
    /*施工台数の数字*/
    .result-numbers strong{
        font-size:32px;
        margin-bottom:4px
    }
    
    /*施工台数の年・説明*/
    .result-numbers span{
        font-size:9px;
        line-height:1.4;
        display:block
    }
    
    .recruit>p:not(.eyebrow),
    .partner>p:not(.eyebrow){
        display:none
    }

    .recruit .button,
    .partner .button,
    .home-info-link .button{
        padding-top:4px;
        padding-bottom:4px
    }

    /*PC版はdesktop-textを表示、スマホ版はmobile-textを表示*/
    .home-info-link .button .desktop-text{
        display: inline !important
    }

    .home-info-link .button .mobile-text{
        display: none !important
    }

    @media(max-width:600px){
        .home-info-link .button .desktop-text{
            display: none !important
        }

        .home-info-link .button .mobile-text{
            display: inline !important
        }
    }

    .partner .button{
        background:#fff;
        color:var(--blue)
    }

/* スマホ・タブレット共通（画面幅900px以下）での「選ばれる理由」の修正 */
@media(max-width:900px){

    /* 1. セクション全体を相対位置の基準にする */
    .strength{
        position: relative;
        display: flex;
        flex-direction: column;
    }

    /* 2. 左側の画像エリアに高さをしっかり持たせる */
    .strength-image{
        position: relative;
        min-height: 280px; /* 画像が見える高さを確保 */
        background-size: cover !important;
    }

    /* 3. 画像の上に敷く黒グラデーション */
    .strength-image::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 180px;
        background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
        pointer-events: none;
        z-index: 1;
    }

    /* 4. PC用の絶対配置を一度完全にリセットし、スマホ用の位置（画像の上）に固定する */
    .strength-copy > .eyebrow,
    .strength-copy > h2{
        position: absolute !important;
        left: 20px !important;
        width: calc(100% - 40px) !important;
        z-index: 5 !important;
        color: #fff !important;
        margin: 0 !important;
    }

    .strength-copy > .eyebrow{
        top: 195px; /* この数値を大きく・小さくして上下位置を調整できます */
        font-size: 11px;
    }

    .strength-copy > h2{
        top: 220px; /* この数値を大きく・小さくして上下位置を調整できます */
        font-size: 80px;
    }
}