/* 各ページ冒頭の絵（トップページ・お問合せページには付けない）。新しいファイル /page-art.css */
/* 絵は /assets/ に置いた添付ファイルだけを使う。文字を読みやすくするため、絵の上に白いぼかしを重ねる（文字に影や縁取りは付けない） */

/* ---- 冒頭の帯：ページ名が出る最初の帯を画面いっぱいの幅にして、絵を敷く ---- */
.page-company main>.wrap:first-child,
.page-services main>.wrap:first-child,
.page-services-stones main>.wrap:first-child,
.page-careers main>.wrap:first-child,
.page-ai>.wrap:first-child,
.page-consulting>.wrap:first-child,
.page-advisory>.wrap:first-child,
.page-ip>.wrap:first-child{
 width:auto;max-width:none;margin-inline:0;padding-inline:max(56px,calc((100% - 1200px)/2));
 min-height:360px;display:flex;flex-direction:column;border-bottom:1px solid #dce2e5;
 background-color:#fff;background-repeat:no-repeat;background-size:auto,cover;
 background-image:linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.9) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 84%),var(--art);
 background-position:0 0,var(--art-pos,50% 50%)}
.page-company .page-head,
.page-services .page-head,
.page-services-stones .page-head,
.page-careers .page-head,
.page-ai .page-head,
.page-consulting .page-head,
.page-advisory .page-head,
.page-ip .page-head{margin-block:auto}

/* ---- ページごとの絵と、切り取りの位置 ---- */
.page-company main>.wrap:first-child{--art:url(/assets/art-company.webp);--art-pos:100% 50%}
.page-services main>.wrap:first-child{--art:url(/assets/art-services.webp);--art-pos:100% 50%}
.page-consulting>.wrap:first-child{--art:url(/assets/art-consulting.webp);--art-pos:100% 50%}
.page-advisory>.wrap:first-child{--art:url(/assets/art-advisory.webp);--art-pos:0% 50%}
.page-ai>.wrap:first-child{--art:url(/assets/art-ai.webp);--art-pos:100% 50%}
.page-ip>.wrap:first-child{--art:url(/assets/art-ip.webp);--art-pos:100% 50%}
.page-services-stones main>.wrap:first-child{--art:url(/assets/art-stones.webp);--art-pos:100% 50%}
.page-careers main>.wrap:first-child{--art:url(/assets/art-careers.webp);--art-pos:100% 50%}

/* ---- 企業理念ページ：ページ名が入った大きな帯（パンくずを帯の上に重ねる） ---- */
.page-philosophy main>.wrap:first-child{position:relative;z-index:1;margin-bottom:-51px}
.page-philosophy .philosophy-hero{width:auto;max-width:none;margin-inline:0;padding-inline:max(56px,calc((100% - 1200px)/2));padding-top:85px;border-bottom:1px solid #dce2e5;
 background-color:#fff;background-repeat:no-repeat;background-size:auto,cover;
 background-image:linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.92) 46%,rgba(255,255,255,.75) 70%,rgba(255,255,255,0) 92%),url(/assets/art-philosophy.webp);
 background-position:0 0,100% 50%}

/* ---- 幅1100px以下 ---- */
@media(max-width:1100px){
 .page-company main>.wrap:first-child,
 .page-services main>.wrap:first-child,
 .page-services-stones main>.wrap:first-child,
 .page-careers main>.wrap:first-child,
 .page-ai>.wrap:first-child,
 .page-consulting>.wrap:first-child,
 .page-advisory>.wrap:first-child,
 .page-ip>.wrap:first-child{padding-inline:40px;min-height:330px;background-image:linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.92) 58%,rgba(255,255,255,.6) 78%,rgba(255,255,255,0) 96%),var(--art)}
 .page-philosophy .philosophy-hero{padding-inline:40px}
}
/* ---- 幅900px以下：企業理念ページは文字が帯の幅いっぱいに広がるので、白いぼかしを全面にかけ、帯の下の端だけ絵を見せる ---- */
@media(max-width:900px){
 .page-philosophy .philosophy-hero{background-image:linear-gradient(180deg,rgba(255,255,255,.88) 0,rgba(255,255,255,.88) calc(100% - 72px),rgba(255,255,255,.2) calc(100% - 16px),rgba(255,255,255,.06) 100%),url(/assets/art-philosophy.webp)}
}
/* ---- 幅650px以下（スマホ）：文字が帯の幅いっぱいに広がるので、白いぼかしを全面にかけ、文字の下に絵が見える余白をつくる ---- */
@media(max-width:650px){
 .page-company main>.wrap:first-child,
 .page-services main>.wrap:first-child,
 .page-services-stones main>.wrap:first-child,
 .page-careers main>.wrap:first-child,
 .page-ai>.wrap:first-child,
 .page-consulting>.wrap:first-child,
 .page-advisory>.wrap:first-child,
 .page-ip>.wrap:first-child{padding-inline:20px;min-height:0;background-image:linear-gradient(180deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.92) calc(100% - 92px),rgba(255,255,255,.3) calc(100% - 36px),rgba(255,255,255,.06) 100%),var(--art)}
 .page-company .page-head,
 .page-services .page-head,
 .page-services-stones .page-head,
 .page-careers .page-head,
 .page-ai .page-head,
 .page-consulting .page-head,
 .page-advisory .page-head,
 .page-ip .page-head{margin-block:0;padding-bottom:96px}
 .page-philosophy main>.wrap:first-child{margin-bottom:-43px}
 .page-philosophy .philosophy-hero{padding-inline:20px;padding-top:65px;background-position:0 0,80% 50%;background-image:linear-gradient(180deg,rgba(255,255,255,.88) 0,rgba(255,255,255,.88) calc(100% - 52px),rgba(255,255,255,.2) calc(100% - 12px),rgba(255,255,255,.06) 100%),url(/assets/art-philosophy.webp)}
 .page-company main>.wrap:first-child{--art-pos:78% 50%}
 .page-services main>.wrap:first-child{--art-pos:80% 50%}
 .page-consulting>.wrap:first-child{--art-pos:100% 50%}
 .page-advisory>.wrap:first-child{--art-pos:20% 50%}
 .page-ai>.wrap:first-child{--art-pos:80% 50%}
 .page-ip>.wrap:first-child{--art-pos:80% 50%}
 .page-services-stones main>.wrap:first-child{--art-pos:85% 50%}
 .page-careers main>.wrap:first-child{--art-pos:80% 50%}
}