/* アルバム風に写真を散りばめる（トップのメインビジュアル・下層の上部画像で共通） */
.album{position: relative; overflow: hidden;}
#main-visual.album, #sub-visual.album{background: #efe9e1 radial-gradient(circle at 50% 50%, #f8f4ef 0%, #e9e1d6 100%);}
body{background: #fff; color: #333;}
.album .photo{position: absolute; margin: 0; padding: 8px 8px 26px 8px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); box-sizing: border-box; transform: rotate(var(--r, 0deg));}
.album .photo img{display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%;}

/* トップ：画面いっぱいのアルバム＋中央にキャッチ */
#main-visual.album{height: 760px; padding-top: 0; margin-bottom: 20px;}
#main-visual .photo{width: 15%;}
#main-visual .photo:nth-child(1){left: 1%;  top: 5%;  --r: -6deg;}
#main-visual .photo:nth-child(2){left: 15%; top: 27%; --r: 4deg;}
#main-visual .photo:nth-child(3){left: 3%;  top: 53%; --r: 5deg;}
#main-visual .photo:nth-child(4){left: 83%; top: 4%;  --r: 5deg;}
#main-visual .photo:nth-child(5){left: 70%; top: 27%; --r: -4deg;}
#main-visual .photo:nth-child(6){left: 82%; top: 53%; --r: -5deg;}
#main-visual .photo:nth-child(n+7){display: none;}
#main-visual .catchbox{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; background: rgba(255,255,255,.9); padding: 36px 56px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.15); white-space: nowrap;}
#main-visual .catch{font-family: 'Noto Serif JP', serif; color: #333; font-size: 40px; line-height: 1.5; letter-spacing: 2px; margin: 0;}
#main-visual .sub{font-size: 16px; color: #7f7f7f; margin-top: 14px; letter-spacing: 3px;}

/* 下層：上部の画像（ページごとに違う写真） */
#sub-visual.album{height: 482px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding-top: 40px; box-sizing: border-box;}
#sub-visual .photo{position: relative; width: 230px; flex: none;}
#sub-visual .photo:nth-child(odd){--r: -4deg; margin-top: 10px;}
#sub-visual .photo:nth-child(even){--r: 3deg;}
#sub-visual .pagetitle{position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 5; background: rgba(255,255,255,.92); padding: 10px 40px; font-family: 'Noto Serif JP', serif; font-size: 26px; letter-spacing: 4px; color: #333; white-space: nowrap;}

@media screen and (max-width: 768px){
#main-visual.album{height: 520px; margin-top: 56px;}
#main-visual .photo{width: 34%; padding: 5px 5px 16px 5px;}
#main-visual .photo:nth-child(1){left: -4%; top: 2%;}
#main-visual .photo:nth-child(2){left: 33%; top: -3%;}
#main-visual .photo:nth-child(3){left: 70%; top: 3%;}
#main-visual .photo:nth-child(4){left: -2%; top: 58%;}
#main-visual .photo:nth-child(5){left: 35%; top: 62%;}
#main-visual .photo:nth-child(6){left: 70%; top: 57%;}
#main-visual .photo:nth-child(n+7){display: none;}
#main-visual .catchbox{padding: 20px 18px; white-space: normal; width: 86%; box-sizing: border-box;}
#main-visual .catch{font-size: 22px; line-height: 1.6; letter-spacing: 1px;}
#main-visual .sub{font-size: 12px; letter-spacing: 1px; margin-top: 8px;}
#sub-visual.album{height: 260px; margin-top: 56px;}
#sub-visual.album{gap: 12px; padding-top: 24px;}
#sub-visual .photo{width: 29%; padding: 4px 4px 12px 4px;}
#sub-visual .pagetitle{font-size: 18px; padding: 6px 24px; bottom: 16px;}
}

/* 会社概要：企業理念の見出し */
.rinen{font-family: 'Noto Serif JP', serif; font-size: 28px; line-height: 1.6 !important; margin-bottom: 20px; color: #333;}
@media screen and (max-width: 768px){.rinen{font-size: 22px;} .pc_br{display: none;}}

/* ヘッダーを写真より手前に（#page-top の 10000 より下） */
#top-head{z-index: 1000;}

/* トップ：タレントプロデュース事業（旧WEBソリューション事業の段） */
#row01 .services{margin: 16px 0;}
#row01 .services li{background: #f6f2ec; border-left: solid 4px #8f8979; padding: 10px 16px; margin-bottom: 10px;}
#row01 .services h3{font-family: 'Noto Serif JP', serif; font-size: 18px; color: #333; margin-bottom: 4px;}
#row01 .services p{line-height: 26px;}
#row01 .imgbox img{aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;}

/* タレントプロデュース事業の写真をゆっくり右→左へ流す（プレミアの寄り引きと同じ動き） */
#row01 .imgbox{overflow: hidden; aspect-ratio: 4 / 5;}
#row01 .imgbox img{width: 130%; height: 100%; aspect-ratio: auto; animation: panRightToLeft 20s ease-in-out infinite alternate;}
@keyframes panRightToLeft{
from{transform: translateX(0);}
to{transform: translateX(-23%);}
}
/* 動きを減らす設定の人には止めて見せる */
@media (prefers-reduced-motion: reduce){
#row01 .imgbox img{animation: none;}
}

/* トップのアルバム：ぽんと出てから、ゆっくり浮き沈みする */
#main-visual .photo{
  animation:
    photoPopIn .9s cubic-bezier(.22, .8, .3, 1) both var(--d, 0s),
    photoFloat 5.5s ease-in-out infinite alternate calc(var(--d, 0s) + .9s);
}
#main-visual .photo:nth-child(1){--d: .05s;}
#main-visual .photo:nth-child(2){--d: .20s;}
#main-visual .photo:nth-child(3){--d: .35s;}
#main-visual .photo:nth-child(4){--d: .12s;}
#main-visual .photo:nth-child(5){--d: .27s;}
#main-visual .photo:nth-child(6){--d: .42s;}
@keyframes photoPopIn{
from{opacity: 0; transform: rotate(var(--r, 0deg)) translateY(-26px) scale(.96);}
to{opacity: 1; transform: rotate(var(--r, 0deg)) translateY(0) scale(1);}
}
@keyframes photoFloat{
from{transform: rotate(var(--r, 0deg)) translateY(0);}
to{transform: rotate(calc(var(--r, 0deg) * 1.15)) translateY(-14px);}
}
/* マウスを乗せた写真は少し持ち上げて手前に */
#main-visual .photo:hover{animation-play-state: paused; z-index: 6; box-shadow: 0 14px 34px rgba(0,0,0,.26);}
@media screen and (max-width: 768px){
@keyframes photoFloat{
from{transform: rotate(var(--r, 0deg)) translateY(0);}
to{transform: rotate(var(--r, 0deg)) translateY(-8px);}
}
}
@media (prefers-reduced-motion: reduce){
#main-visual .photo{animation: none;}
}

/* 下層3ページの上部写真にも、同じ動きを付ける */
#sub-visual .photo{
  animation:
    photoPopIn .9s cubic-bezier(.22, .8, .3, 1) both var(--d, 0s),
    photoFloat 5.5s ease-in-out infinite alternate calc(var(--d, 0s) + .9s);
}
#sub-visual .photo:nth-child(1){--d: .05s;}
#sub-visual .photo:nth-child(2){--d: .22s;}
#sub-visual .photo:nth-child(3){--d: .39s;}
#sub-visual .photo:hover{animation-play-state: paused; z-index: 6; box-shadow: 0 14px 34px rgba(0,0,0,.26);}
@media (prefers-reduced-motion: reduce){
#sub-visual .photo{animation: none;}
}

/* 浮き沈みの長さを1枚ずつ変えて、動きが揃わないようにする */
.album .photo{will-change: transform;}
#main-visual .photo:nth-child(1){animation-duration: .9s, 5.2s;}
#main-visual .photo:nth-child(2){animation-duration: .9s, 6.4s;}
#main-visual .photo:nth-child(3){animation-duration: .9s, 5.8s;}
#main-visual .photo:nth-child(4){animation-duration: .9s, 6.1s;}
#main-visual .photo:nth-child(5){animation-duration: .9s, 5.5s;}
#main-visual .photo:nth-child(6){animation-duration: .9s, 6.7s;}
#sub-visual .photo:nth-child(1){animation-duration: .9s, 5.4s;}
#sub-visual .photo:nth-child(2){animation-duration: .9s, 6.3s;}
#sub-visual .photo:nth-child(3){animation-duration: .9s, 5.8s;}

/* フッターのSNSリンク（X・Instagram） */
footer .sns{float: right; display: flex; gap: 12px; padding-top: 8px;}
footer .sns a{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #333; color: #fff; font-size: 20px; transition: opacity .2s;}
footer .sns a:hover{opacity: .7;}
footer .sns svg{width: 18px; height: 18px; fill: currentColor;}
@media screen and (max-width: 768px){
footer .sns{float: none; clear: both; justify-content: center; padding: 12px 0 4px;}
}

/* ロゴ（ローマ字版）。画像は2倍の解像度なので高さで表示サイズを決める */
#top-head .logo img, footer .logo img{height: 50px; width: auto;}
@media screen and (max-width: 768px){
#top-head .logo img{height: 42px;}
}

/* 会社概要の横長ロゴ（差し替え前の写真と同じ幅） */
.logo-wide{display: block; width: 936px; max-width: 100%; height: auto; margin: 0 auto;}

/* SNSボタンを各サービスのアプリのアイコンと同じ見た目に */
footer .sns a{border-radius: 22%;}
footer .sns a.sns-x{background: #000;}
footer .sns a.sns-ig{background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); font-size: 24px;}

/* お問い合わせ送信後のお礼 */
.contact-thanks{padding: 40px 10px; text-align: center; line-height: 2;}

/* パソコン幅で上に貼りつくメニューの帯を透けないように（元は白80%で後ろが透けていた） */
@media screen and (min-width: 769px){
#top-head.fixed{background: #fff;}
}

/* パソコン幅：メニューの帯を最初から画面の上に固定する。
   元は100px動かした瞬間に固定へ切り替わり、帯の高さ(65px)ぶん中身が上に飛んでカクンとなっていた */
@media screen and (min-width: 769px){
#top-head{position: fixed; top: 0; left: 0; margin-top: 0; z-index: 1000; transition: box-shadow .3s;}
#top-head:not(.fixed){box-shadow: none;}
body{padding-top: 65px;}
}

/* スマホ幅：上のメニューの帯を透けないように（元は白80%）／
   一番下のコピーライトが右下の「上に戻る」ボタン(52px)に隠れないよう右に余白 */
@media screen and (max-width: 768px){
#mobile-head{background: #fff;}
footer .copyright{padding: 10px 58px 10px 10px;}
}

/* 769〜1199px（小さめのノートPC・タブレット横向き）：元は横幅1200px固定で横スクロールが出ていた。
   画面幅に合わせて縮める */
@media screen and (min-width: 769px) and (max-width: 1199px){
.inner, .section, #breadcrumbs, #row01{width: auto; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
#sub-visual{width: auto;}
#sub-visual.album{gap: 3%;}
#sub-visual .photo{width: 28%; max-width: 230px;}
#row01 .txbox{width: 56%;}
#row01 .imgbox{width: 41%;}
#global-nav ul li a, #top-head.fixed #global-nav ul li a{padding: 0 14px;}
.logo-wide{width: 100%; max-width: 936px;}
}
/* 769〜959px：ロゴとメニューが重ならないよう、ロゴを少し小さく・メニューの間隔を詰める */
@media screen and (min-width: 769px) and (max-width: 959px){
#top-head .logo img, footer .logo img{height: 40px;}
#global-nav ul li a, #top-head.fixed #global-nav ul li a{padding: 0 8px;}
body{padding-top: 55px;}
}
/* 769〜1199px：トップの写真がキャッチの箱に隠れないよう、スマホと同じ「上3枚・下3枚」の並びにする */
@media screen and (min-width: 769px) and (max-width: 1199px){
#main-visual.album{height: 680px;}
#main-visual .photo{width: 170px;}
#main-visual .photo:nth-child(1){left: 5%;  top: 3%;}
#main-visual .photo:nth-child(2){left: calc(50% - 85px); top: 0;}
#main-visual .photo:nth-child(3){left: calc(95% - 170px); top: 4%;}
#main-visual .photo:nth-child(4){left: 6%;  top: 60%;}
#main-visual .photo:nth-child(5){left: calc(50% - 85px); top: 64%;}
#main-visual .photo:nth-child(6){left: calc(94% - 170px); top: 59%;}
#main-visual .catchbox{padding: 26px 40px;}
#main-visual .catch{font-size: 30px;}
}