/* ======================= Interview-3 専用 CSS ======================= */ /* ヘッダーをスリムに */ .site-header, header.site-header, .fixed-header{ height:60px!important;min-height:60px!important;padding:0!important;display:flex;align-items:center; } .site-header .inside-header{min-height:60px!important} .site-header .logo img,.fixed-header .logo img{height:28px!important;width:auto!important} .site-header nav a,#site-navigation a{line-height:60px!important} /* 画像共通 */ .interview-3-page img{display:block;max-width:100%;height:auto} /* ===== Hero ===== */ .interview-section{position:relative;width:100vw;height:660px;overflow:hidden;margin-bottom:60px} .interview-bg{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:100vw;height:900px;object-fit:cover;object-position:center 24%;z-index:1} /* 個別移動：CSS変数で操作 */ .interview-title{ position:absolute;z-index:2;margin:0; left: var(--hero-title-x, 120px); top: var(--hero-title-y, 25%); font-family:'Poppins',sans-serif;font-weight:800;font-size:84px;line-height:1;font-style:italic;color:#fff;white-space:nowrap;text-shadow:0 0 4px rgba(0,0,0,.3) } .hero-name-wrap{ position:absolute;z-index:2; left: var(--hero-name-x, 125px); top: var(--hero-name-y, 68%); color:#fff;text-shadow:0 0 4px rgba(0,0,0,.4) } .name-jp{font-size:36px;font-weight:700;margin:0 0 6px} .position{font-size:24px;margin:0} /* ===== Cards ===== */ .interview-block{max-width:1200px;margin:0 auto;padding:80px 20px;background:#fff} .interview-card-overlay{position:relative;width:100%;max-width:none;margin:0 auto 100px;padding:0 40px} .image-01,.image-02,.image-03{position:relative} .image-01{left:560px;margin-bottom:0} .image-02{left:0;margin-bottom:300px;margin-top:270px} .image-03{left:560px;margin-bottom:170px;margin-top:-20px} .image-01 img,.image-02 img,.image-03 img{width:100%;max-width:590px;height:390px;object-fit:cover} /* White boxes（全部同じ透け感） */ .overlay-text-box{position:absolute;background:rgba(255,255,255,.9);padding:40px;border-radius:8px;box-shadow:0 6px 30px rgba(0,0,0,.2);max-width:60%;z-index:2} .text-01{left:0;margin-top:-290px;height:460px;width:700px} .text-02{top:100px;right:-70px;max-width:none;width:690px;height:470px;overflow:auto} .text-03{top:90px;left:0;max-width:none;width:700px;height:450px} /* 白ボックス内“テキストだけ”少し下げる（01〜03一括） */ .overlay-text-box .interview-question, .overlay-text-box .interview-subtitle, .overlay-text-box .interview-answer{ transform: translateY(var(--text-shift, 10px)); } /* Typography */ .interview-number{position:absolute;top:-50px;left:30px;z-index:9;font-size:80px;color:#007BFF;font-weight:800;font-family:'Poppins',sans-serif;line-height:1;font-style:italic} .number2{margin-top:108px;left:1060px} .number3{margin-top:100px} .interview-question{font-size:22px;font-weight:700;margin:0 0 16px} .interview-subtitle{font-size:17px;font-weight:700;color:#222;margin-bottom:25px;padding-left:18px} .interview-answer{font-size:16px;color:#333;line-height:1.9;margin-bottom:.8em} .subtitle-bar{display:inline-block;width:4px;height:24px;background:#a8e063;margin-right:10px;border-radius:2px;margin-left:-15px} /* ===== Reveal Animation（ふわっと） ===== */ @keyframes fadeUp{0%{opacity:0;transform:translateY(48px)}100%{opacity:1;transform:none}} html.js-enabled .will-reveal{opacity:0;transform:translateY(48px);will-change:opacity,transform} html.js-enabled .will-reveal.is-in{animation:fadeUp .9s cubic-bezier(.2,.65,.2,1) forwards} html.js-enabled .will-reveal{animation-delay:var(--reveal-delay,0ms)} @media (prefers-reduced-motion:reduce){ html.js-enabled .will-reveal, html.js-enabled .will-reveal.is-in{ opacity:1!important;transform:none!important;animation:none!important } } /* ===== Footer（ナビを少し左へ） ===== */ .site-footer{position:relative;clear:both;width:100%;background:#0B1E32;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(#0B1E32,#0B1E32);background-repeat:repeat;background-size:20px 20px,cover;padding:60px 20px 20px;color:#fff;margin-top:20px} .footer-top{text-align:center;margin-bottom:40px} .footer-top h2{font-size:28px;margin-bottom:10px} .footer-top p{margin:6px 0;font-size:15px;line-height:1.6} .footer-main{display:flex;flex-wrap:wrap;justify-content:space-between;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);padding:40px 0} .footer-logo{max-width:280px} .footer-logo img{width:160px;margin-bottom:10px} .footer-logo p{font-size:14px;margin:6px 0} .footer-icon-group{margin-top:10px} .footer-icon-group a{display:inline-block;margin-right:12px;transition:transform .3s,opacity .3s} .footer-icon-group img{width:38px;height:38px;filter:brightness(0) invert(1)} .footer-icon-group a:hover{transform:scale(1.1);opacity:.8} /* ← ここで左へ寄せ（デフォルト少し左、数値は
で変更可） */ .footer-nav{ display:flex;gap:60px; transform: translateX(var(--footer-nav-shift, 0px)); justify-content:flex-start; /* 左寄せ */ text-align:left;max-width:900px;margin-left:auto;margin-right:auto; } .footer-nav h3{font-size:16px;margin-bottom:10px} .footer-nav ul{list-style:none;margin:0;padding:0} .footer-nav li{font-size:14px;margin-bottom:6px} .footer-nav a{color:#fff;border-bottom:1px solid transparent;transition:border-bottom .2s} .footer-nav a:hover{border-bottom:1px solid #fff} .footer-bottom{text-align:center;margin-top:80px;font-size:13px;opacity:.7} /* ===== Responsive ===== */ @media (max-width:1280px){ .image-01,.image-02,.image-03{left:0!important;margin-left:0!important;margin-right:0!important} .image-01 img,.image-02 img,.image-03 img{max-width:100%!important;width:100%!important} .overlay-text-box,.text-01,.text-02,.text-03{ position:relative!important;top:auto!important;left:auto!important;right:auto!important; margin:16px 0!important;width:auto!important;max-width:100%!important;height:auto!important;padding:24px!important; background:rgba(255,255,255,.95)!important;box-shadow:0 6px 24px rgba(0,0,0,.12)!important;border-radius:8px!important;overflow:visible!important } .interview-number{position:static!important;font-size:2rem!important;color:#007BFF!important;margin:8px 0!important} } @media (max-width:768px){ .interview-section{height:80vw} .interview-bg{top:0;height:100%;object-position:center 38%} .interview-title{font-size:1.9rem;left:8%;top:24%} .hero-name-wrap{left:8%;top:58%} .interview-card-overlay{display:block;margin:32px auto;padding:0 16px} .footer-main{flex-direction:column;align-items:center;text-align:center;padding:12px;gap:12px} .footer-nav{flex-direction:row;justify-content:space-between;flex-wrap:nowrap;gap:12px;text-align:left;transform:none; /* モバイルは中央基準に戻す */} .footer-nav>div{flex:1;min-width:100px} .footer-nav h3{font-size:13px;margin-bottom:4px;white-space:nowrap} .footer-nav li{font-size:11px;margin-bottom:2px;white-space:nowrap} .site-footer{font-size:11px} } /******************************************************** * Interview-3 ふわっと復活パッチ（アニメ競合を解消） * - transform競合を避けて margin-top で下げる * - アニメ用keyframesをこのページ用プレフィックスで再定義 * - !important最小限で“確実に動く”状態に ********************************************************/ /* ここで微調整（必要なら数値だけ変えてOK） */ .interview-3-page{ --i3-text-shift: 25px; /* 白ボックス内の全テキスト下げ量 */ } /* 白ボックス内テキストは transform ではなく margin で下げる */ .overlay-text-box .interview-question, .overlay-text-box .interview-subtitle, .overlay-text-box .interview-answer{ margin-top: var(--i3-text-shift); /* 万一どこかで transform が当たってもアニメを優先したいので抑制 */ transform: none !important; } /* ====== ふわっと用の再定義（競合に強い専用名） ====== */ @keyframes i3-slide-up { 0%{opacity:0; transform:translateY(80px)} 100%{opacity:1; transform:none} } @keyframes i3-slide-left { 0%{opacity:0; transform:translateX(-50px)} 100%{opacity:1; transform:none} } @keyframes i3-fade-in { 0%{opacity:0} 100%{opacity:1} } @keyframes i3-slide-up-big { 0%{opacity:0; transform:translateY(120px)} 100%{opacity:1; transform:none} } @keyframes i3-slide-up-title { 0%{opacity:0; transform:translateY(80px)} 100%{opacity:1; transform:none} } @keyframes i3-slide-up-timeline { 0%{opacity:0; transform:translateY(80px)} 100%{opacity:1; transform:none} } /* 初期状態（隠す） */ .animate-hidden{ opacity:0; transform:translateY(80px); will-change: transform, opacity; } /* 表示用クラス（強めに指定） */ .slide-up { animation: i3-slide-up .9s ease-out forwards !important; } .slide-in-left { animation: i3-slide-left .9s ease-out forwards !important; } .fade-in { animation: i3-fade-in .8s ease-in forwards !important; } .slide-up-big { animation: i3-slide-up-big 1.1s ease-out forwards !important; } .slide-up-title { animation: i3-slide-up-title 1s ease-out forwards !important; } .slide-up-timeline { animation: i3-slide-up-timeline .9s ease-out forwards !important; } /* 低速回線やreduce-motionの人に配慮 */ @media (prefers-reduced-motion: reduce){ .animate-hidden{ opacity:1; transform:none; } .slide-up, .slide-in-left, .fade-in, .slide-up-big, .slide-up-title, .slide-up-timeline{ animation: none !important; } } /******************************************************** * - ヒーロー（Interview / 名前 / 役職）を個別に動かせる ********************************************************/ /* ====== ヒーロー：個別に調整できる変数 ====== */ body.interview-3-page{ /* 好みで微調整してください（%/pxどちらでもOK） */ --hero-title-top: 22%; --hero-title-left: 90px; --hero-name-top: 40%; --hero-name-left: 115px; /* 役職は名前から+48px下に出ます */ } /* 位置適用（個別移動） */ .interview-overlay{ position:relative; } .interview-overlay .interview-title{ position:absolute; top:var(--hero-title-top); left:var(--hero-title-left); margin:0 !important; transform:none !important; } .interview-overlay .name-jp{ position:absolute; top:var(--hero-name-top); left:var(--hero-name-left); margin:0 !important; transform:none !important; } .interview-overlay .position{ position:absolute; top:calc(var(--hero-name-top) + 48px); left:var(--hero-name-left); margin:0 !important; transform:none !important; } /* スマホ時（中央基準） */ @media (max-width:768px){ body.interview-3-page{ --hero-title-top: 32%; --hero-title-left: 50%; --hero-name-top: 54%; --hero-name-left: 50%; } .interview-overlay .interview-title, .interview-overlay .name-jp, .interview-overlay .position{ left:50%; transform:translateX(-50%) !important; text-align:center; } .interview-overlay .position{ top:calc(var(--hero-name-top) + 40px); } } /* ========================================= フッター：一枚目と同じレイアウトに固定 左：ロゴ/住所/電話/SNS 中央：3カラム（会社案内/採用情報/新着情報） 下：コピーライト中央 ========================================= */ .site-footer{ --footer-max: 1160px; /* 全体の横幅（必要なら 1120/1200 へ） */ --nav-gap: 70px; /* 3カラムの間隔 */ } /* お問い合わせ（上段）は中央のまま・幅揃え */ .site-footer .footer-top{ max-width: var(--footer-max); margin: 0 auto 32px; text-align: center; } /* 中段：左=ロゴ、中央=3カラム */ .site-footer .footer-main{ max-width: var(--footer-max); margin: 0 auto; padding: 36px 0; /* 少しスリムに */ border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 1fr 1fr; /* 左右 2 カラム */ align-items: start; column-gap: 64px; } /* 左ブロック：できるだけ左に寄せる */ .site-footer .footer-logo{ justify-self: start; } /* 右ブロック（3カラム）：中央寄せで“左へ”寄った見え方に */ .site-footer .footer-nav{ justify-self: center; /* 中央に据える */ display: flex; gap: var(--nav-gap); margin: 0; /* 以前の左マージンは無効化 */ transform: translateX(-40px); /* ←もう少し左へ寄せる微調整 */ } /* コピーライトは中央へ */ .site-footer .footer-bottom{ max-width: var(--footer-max); margin: 22px auto 0; text-align: center; } /* さらに広い画面で微調整（“もう少し左”にしたい時） */ @media (min-width:1280px){ .site-footer .footer-nav{ transform: translateX(-60px); } } /* スマホは既存の縦積みでOK（中央寄せ解除） */ @media (max-width:768px){ .site-footer .footer-main{ display: flex; flex-direction: column; gap: 16px; padding: 20px 0; } .site-footer .footer-nav{ transform:none; justify-content: space-between; gap:12px; width:100%; } .site-footer .footer-nav > div{ flex:1; min-width: 100px; } } /* ===== ヘッダー縦幅を短く（共通） ===== */ .fixed-header, .site-header{ height: 60px !important; min-height: 60px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .fixed-header .logo img{ height: 26px !important; width:auto !important; } .site-header nav a, #site-navigation a{ line-height: 60px !important; } /* ===== “ふわっと”は既存の .animate-hidden を使う想定 ===== */ /* もし他CSSで上書きされて消える場合の保険（必要なら有効化） .animate-hidden{ opacity:0; transform:translateY(80px); } */ /******************************************** * ファーストビュー：Interviewタイトル・名前・役職 * 位置を個別に調整可能に ********************************************/ .interview-title { position: relative; display: inline-block; margin: 0; padding: 0; /* --- 好きに調整してください --- */ margin-left: 70px !important; /* 横位置 */ margin-top: 105px; /* 縦位置 */ } .name-jp { position: relative; display: block; font-size: 36px; font-weight: bold; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.4); /* --- 好きに調整してください --- */ margin-left: 75px; margin-top: -30px; } .position { position: relative; display: block; font-size: 22px; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.4); /* --- 好きに調整してください --- */ margin-left: 75px; margin-top: -8px; } /******************************************** * フッター全体の左寄せ強化 ******************************************** /* ナビゲーションブロックをロゴの近くに */ .site-footer .footer-nav { margin-left: 400px !important; /* ← ロゴとの距離を縮める */ gap: 50px; /* ナビ同士の間隔（もっと詰めたいなら40pxとか） */ display: flex; } /* 各ナビの中身は左寄せ */ .site-footer .footer-nav div { text-align: left !important; } /************************************************* * フッター：上1本のラインをフル幅 & ロゴを完全左寄せ *************************************************/ /* 既存の上下ボーダーを無効化＋基準を作る */ .site-footer .footer-main{ position: relative; border: none !important; } /* 上1本だけ、画面端までの横線 */ .site-footer .footer-main::before{ content:""; position:absolute; top:0; left: calc(50% - 50vw); /* ← ビューポート左端に合わせる */ width: 100vw; /* ← 画面いっぱい */ height: 1px; background: rgba(255,255,255,.2); pointer-events:none; } /* 下の線が別セレクタで生きていても消す */ .site-footer .footer-main::after{ content:none !important; display:none !important; } /* ロゴブロックを“本当に”左端へ（中央レイアウトを突破） */ .site-footer .footer-logo{ text-align:left !important; justify-self:start !important; align-self:start; margin-left: calc(50% - 50vw + 20px) !important; /* ↑ +20px は左の余白（任意で調整）。0 にすると完全に端ぴったり */ max-width: 420px; /* 任意：はみ出し防止 */ } .site-footer .footer-logo img{ display:block; } .site-footer .footer-logo p{ text-align:left !important; } .site-footer .footer-icon-group{ display:flex; gap:12px; justify-content:flex-start !important; align-items:center; } /* “会社案内/採用情報/新着情報”の列も少し左へ寄せる（必要なら） */ .site-footer .footer-nav{ margin-left: -10px; /* ← 左へ微調整。もっと寄せたければ -20px 等 */ } /* モバイルでもフルブリードを維持 */ @media (max-width:768px){ .site-footer .footer-main::before{ left: calc(50% - 50vw); width: 100vw; } .site-footer .footer-logo{ margin-left: calc(50% - 50vw + 16px) !important; /* スマホの左右余白 */ } .site-footer .footer-nav{ margin-left: 0; } } /******************************************** * フッターロゴブロックを左端に固定 ********************************************/ .site-footer .footer-main { display: flex; justify-content: flex-start !important; /* 左寄せ */ align-items: flex-start; width: 100% !important; /* 幅いっぱいに広げる */ max-width: 100% !important; margin: 0 !important; /* 中央寄せを無効化 */ padding-left: 40px; /* ← 好みで余白を調整 */ } /* ロゴブロック */ .site-footer .footer-logo { margin: 0 !important; /* 中央寄せリセット */ padding: 0 !important; text-align: left !important; flex: 0 0 auto; /* サイズを固定して寄せる */ } /* ロゴ内の画像やテキストも左揃え */ .site-footer .footer-logo img, .site-footer .footer-logo p, .site-footer .footer-icon-group { margin-left: 0 !important; text-align: left !important; justify-content: flex-start !important; } /* ========================================== *//* ========================================== *//* ========================================== *//* ========================================== */ /**** ================================ interview-3（page-id:135）専用パッチ ================================ ****/ /* ========== 1) ヘッダー（PC） ========== */ @media (min-width: 769px){ /* 行を全幅にして左右端に配置 */ body.page-id-135 .site-header .inside-header{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; max-width:none !important; margin:0 !important; padding: 16px 32px !important; /* ← ヘッダー縦幅は上下の数値で調整 */ box-sizing:border-box !important; } /* ロゴ（左） */ body.page-id-135 .site-branding, body.page-id-135 .site-logo{ flex:0 0 auto !important; margin:0 !important; } body.page-id-135 .custom-logo{ height: 22px !important; /* ← ロゴの高さ（35〜48px 好みで） */ width: auto !important; max-height:none !important; display:block !important; } /* メニュー（右） */ body.page-id-135 .main-navigation{ margin-left:auto !important; margin-right:0 !important; float:none !important; display:flex !important; align-items:center !important; } body.page-id-135 .main-navigation .main-nav > ul{ display:flex !important; flex-wrap:nowrap !important; white-space:nowrap !important; gap: 32px !important; /* ← メニューの間隔 */ margin:0 !important; padding:0 !important; list-style:none !important; } body.page-id-135 .main-navigation .main-nav > ul > li > a{ font-size: 18px !important; /* ← メニュー文字サイズ */ line-height: 1.5 !important; padding: 0 !important; font-weight: 500 !important; color:#111 !important; text-decoration:none !important; } /* 位置ズレ防止の保険（過去のズラしを無効化） */ body.page-id-135 .site-header, body.page-id-135 .inside-header, body.page-id-135 .site-branding, body.page-id-135 .site-logo, body.page-id-135 .main-navigation{ position:relative !important; left:auto !important; right:auto !important; transform:none !important; } } /* ========== 2) ファーストビュー ========== */ /* セクションを基準箱にして固定高・中央配置 */ body.page-id-135 .interview-section{ position: relative !important; width: 100% !important; height: 660px !important; /* ← 高さを統一（600〜720で調整OK） */ overflow: hidden !important; } /* 背景画像を全PC同じ見え方に（cover & 固定オフセット） */ body.page-id-135 .interview-section .interview-bg{ position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 22% !important; /* ← 見せたい位置。上下は%で微調整 */ display: block !important; } /* ========== 3) WP共通フッターを消して、手書きだけ残す ========== */ /* テーマのグローバルフッター（.site直下）だけ非表示に */ body.page-id-135 .site > footer.site-footer{ display: none !important; } /* もし手書きフッターにも .site-footer を使っている場合は、 テンプレ側に id を付けるのが理想（例：