/* ===== huit 2026 リニューアル追加スタイル ===== */ .youtube { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); height: max(100vh, 56.25vw); min-height: 620px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .youtube_video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .youtube_video video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; } .youtube_overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.55)); z-index: 1; pointer-events: none; } .youtube_content { position: relative; z-index: 3; padding: 0 20px; } .youtube .section_head { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 14px; } .youtube .section_head-main { color: #fff; } .youtube .section_head-sub { color: #fff; } .youtube_head-icon { display: block; width: 48px; height: auto; position: relative; top: 10px; } .youtube_lead { margin-top: 24px; font-size: 16px; line-height: 2; color: #fff; } .youtube_link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 32px; padding: 14px 28px; border-radius: 0; background-color: rgba(255, 255, 255, 0.01); border: 1px solid #ff0000; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none; -webkit-transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .youtube_link:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); background-color: #ff0000; border-color: #ff0000; } .youtube_link:hover .youtube_link-text { color: #fff; } .youtube_link-text { font-size: 18px; font-weight: normal; letter-spacing: 0.03em; color: #fff; white-space: nowrap; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .section.youtube { margin-top: 0; margin-bottom: 0; padding: 0; } @media screen and (max-width: 767px) { .youtube { min-height: 480px; } .youtube_content { padding: 0 24px; } .youtube_lead { font-size: 14px; line-height: 1.9; text-align: left; } .youtube_link { margin-top: 24px; padding: 12px 20px; } .youtube_link-text { font-size: 14px; } .youtube_head-icon { width: 32px; } } /* ===== sticky を生かすため祖先の overflow-x:hidden を clip に（横はみ出しは抑える）===== */ .has-stack, .has-stack body, .has-stack .wrapper { overflow-x: clip !important; overflow-y: visible !important; } /* ===== 波線をすべて撤去（FV下端・works・contact）===== */ .fv::after { content: none !important; display: none !important; } .wave-section::before, .wave-section::after { content: none !important; display: none !important; } /* ===== FV見出し：新HPと同じ作り（背景パネルなし・縦中央やや上・白文字）===== */ .fv_contents { top: 50%; bottom: auto; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: min(900px, 88vw); padding: 0 40px 0 60px; background: none; /* bg_fv.png パネルを消す */ } .fv_heading-small { color: #fff; font-size: clamp(16px, 1.8vw, 24px); margin-bottom: 8px; letter-spacing: .08em; line-height: 1.4; } .fv_heading-main { display: block; color: #fff; font-size: clamp(26px, 3.6vw, 52px); font-weight: bold; line-height: 1.4; letter-spacing: .05em; margin-top: 16px; } /* 白文字を明るい写真でも読めるように、左側を暗くするグラデを敷く */ .fv::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.32) 32%, rgba(0,0,0,0) 68%); z-index: 1; pointer-events: none; } .fv_contents { z-index: 2; } /* ===== コンセプト見出しを画像に少しかぶせる（新HPと同じ）===== */ .concept .section_head { margin-right: -170px; position: relative; z-index: 3; } /* ===== セクション積み上げ（sticky stack）===== */ .has-stack .stack { position: -webkit-sticky; position: sticky; top: 0; /* 実際の値はJSが高さに応じて設定 */ min-height: 100vh; background-color: #fff; /* 不透明にして下を隠す */ box-shadow: 0 -24px 48px rgba(0,0,0,.14); /* せり上がる板の上端に影 */ } .has-stack .stack.concept { z-index: 1; margin-top: 0; } /* FVとの60px隙間(グレー)を除去 */ .has-stack .stack.works { z-index: 2; } .has-stack .stack.flow { z-index: 3; } .has-stack .stack.youtube { z-index: 4; } .has-stack .stack.contact { z-index: 5; min-height: auto; } /* ===== 配置微調整 ===== */ /* concept_head（見出し＋メイン画像）を少し左へ寄せて中央に見せる */ .concept .concept_head { -webkit-transform: translateX(-50px); transform: translateX(-50px); } /* 散りばめ4枚を内側（中央寄り）へ。margin方式でブレイクポイント非依存 */ .concept_deco--01, .concept_deco--02 { margin-left: 50px; } .concept_deco--03, .concept_deco--04 { margin-right: 50px; } /* ===== ヘッダーロゴ：マーク＋社名テキスト（送付画像の並びに準拠）===== */ .header_logo { width: auto !important; padding: 12px 24px; } .header_logo a { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; gap: 12px; text-decoration: none; } .header_logo img { width: 54px; height: auto; display: block; -ms-flex-negative: 0; flex-shrink: 0; } .header_logo-lockup { display: -webkit-inline-box; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 1.1; color: #26499d; } .header_logo-brand { font-family: "Noto Sans JP", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: .04em; } .header_logo-company { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-top: 3px; } /* ===== ヘッダーロゴ微調整 ===== */ .header_logo a { gap: 7px; } /* ロゴと文字の間を詰める */ .header_logo-lockup { justify-content: center; } /* 縦位置をマーク中央に合わせる */ .header_logo-brand { line-height: 1; } /* 上下の余白を消してマークと揃える */ .header_logo-company { line-height: 1; margin-top: 4px; } .header_logo-company-prefix { font-size: .8em; } /* 「株式会社」だけ小さく */ /* ===== ヘッダーロゴ：1行構成（株式会社 小さめ＋字間詰め／huit 大きめ＋字間広め）===== 2026-08-26 歌織さん指示で2点変更（Web制作LP huit-lp-web2026 と同じ組み方に揃えた）： 1. 「株式会社」をベースライン揃えではなく huit の高さの中央に合わせる （ベースライン揃えだと小さいほうが下に沈んで見える） 2. 間隔は margin-right ではなく gap で取る 3. 社名は Figtree。和文グリフがないので「株式会社」は Noto Sans JP に自動で落ちる */ .header_logo-lockup { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; font-family: "Figtree", "Noto Sans JP", sans-serif; color: #26499d; } .header_logo-company-prefix { font-size: 14px; font-weight: 700; letter-spacing: -.02em; /* 株式会社の字間を詰める */ } .header_logo-brand { font-family: "Figtree", "Noto Sans JP", sans-serif; font-size: 27px; font-weight: 700; letter-spacing: .1em; /* huit の字間を広げる */ line-height: 1; } /* ===== FV表示中はロゴを白に（暗い画像に青が負けるため）===== */ .fv-dark .header_logo-lockup { color: #fff; } .fv-dark .header_logo-company-prefix, .fv-dark .header_logo-brand { color: #fff; } .header_logo-lockup, .header_logo-company-prefix, .header_logo-brand { transition: color .3s ease; } /* ===== FVスライドショー（クロスフェード）===== */ .fv_slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .fv_slide { position: absolute; inset: 0; background-size: cover; background-position: center center; opacity: 0; transition: opacity 1.6s ease-in-out; -webkit-animation: fvZoom 12s ease-in-out infinite alternate; animation: fvZoom 12s ease-in-out infinite alternate; } .fv_slide.is-active { opacity: 1; } /* FV上ではロゴのマークも白に（フィルタで白化・スクロールで青に戻る）*/ .header_logo img { transition: -webkit-filter .3s ease, filter .3s ease; } .fv-dark .header_logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* ===== 細部の詰め ===== */ /* FVロゴ：マークと社名の間をさらに詰める */ .header_logo a { gap: 4px; } /* フッター：社名と住所の行間・間隔を詰める */ .footer_company { margin-bottom: 6px; line-height: 1.3; } .footer_address { line-height: 1.5; margin: 0; } /* フッター社名も株式会社を小さく・huitを広げる（ヘッダーロゴと同じ組み方）*/ /* 2026-08-26：ヘッダーと同じく中央揃え＋gap＋Figtree に変更 */ .footer_company { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2px; } .footer_company-prefix { font-size: .72em; letter-spacing: -.02em; } .footer_company-brand { font-family: "Figtree", "Noto Sans JP", sans-serif; letter-spacing: .12em; } /* ===== YouTube見出し：ロゴをテキストの左に ===== */ .youtube_head-icon { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; top: 11px; margin-right: 4px; } /* ===== モバイル：デスクトップ用のconcept配置調整を打ち消す ===== */ @media screen and (max-width: 1024px) { .concept .section_head { margin-right: 0; } .concept .concept_head { -webkit-transform: none; transform: none; } .concept_deco--01, .concept_deco--02 { margin-left: 0; } .concept_deco--03, .concept_deco--04 { margin-right: 0; } } /* ===== モバイル：ヘッダーロゴを縮小（baseの .header_logo img{width:100%} を上書き）===== */ @media screen and (max-width: 767px) { .header_logo { width: auto !important; padding: 10px 14px; } .header_logo img { width: 40px !important; height: auto; } .header_logo a { gap: 5px; } .header_logo-brand { font-size: 20px; } .header_logo-company-prefix { font-size: 11px; } } /* ===== モバイル：FVコピーのパディングを詰めて折り返しを2行に ===== */ @media screen and (max-width: 767px) { .fv_contents { padding: 0 24px; } } /* ===== お問い合わせカード：タブレット幅（768〜1024px）は1列に（2026-09-17）===== style.css にも1列にする指定があるが、メディアクエリの条件が 「768px以上 かつ 1024px以下 かつ 767px以下」になっていて一度も効いていなかった。 3列のままだと 900px 前後でボタンの文字が折れ、768px では電話番号が3行に割れる。 1025px以上の3列と、767px以下の1列（style.css）はそのまま */ @media screen and (min-width: 768px) and (max-width: 1024px) { .contact-page_cards { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .contact-page_card { padding: 32px 24px; } } /* ===== ボタンと金額の文字を Noto Sans JP にそろえる（2026-09-17 歌織さん指摘）===== 本文の書体は "Oswald", "Noto Sans JP" の順なので、英字と数字だけ縦長の Oswald になり、 「Web」「LINE」や電話番号がボタンの中で詰まって見えていた（「電話番号が見にくい」）。 英字の小見出し（Phone / Web Form / LINE / Web Production）は Oswald のまま */ .fv_link, .works_lp-title, .works_lp-button, .contact-page_card-button { font-family: "Noto Sans JP", sans-serif; } .contact-page_card--phone .contact-page_card-button { letter-spacing: .04em; white-space: nowrap; } /* ===== FVのボタン「映像制作について」「Web制作について」（2026-09-17）===== 白地に青文字（ヘッダーの Contact- と同じ組み合わせ）。左の暗いグラデの上に乗る。 スマホは縦に2本。見出しの padding-left:10px（style.css）に左端をそろえる */ .fv_links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; margin-top: 40px; } .fv_link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; min-width: 230px; padding: 15px 30px; border: 1px solid #ffffff; border-radius: 999px; background-color: #ffffff; color: #26499d; font-size: 16px; font-weight: bold; letter-spacing: .06em; text-decoration: none; -webkit-transition: background-color .3s ease, color .3s ease, border-color .3s ease, -webkit-transform .3s ease; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .fv_link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .fv_link:hover { background-color: #26499d; border-color: #26499d; color: #ffffff; -webkit-transform: translateY(-2px); transform: translateY(-2px); } @media screen and (max-width: 767px) { .fv_links { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; gap: 12px; margin-top: 28px; padding-left: 10px; } .fv_link { width: 100%; min-width: 0; padding: 14px 20px; font-size: 15px; } } /* ===== Web制作LPへの導線カード（2026-09-17）===== 制作事例の一覧の下に置く。サイト内にLP（/lp/web/）へのリンクがどこにもなかったため。 見た目は問い合わせカード（.contact-page_card）と同じガラス調にそろえた */ .works_lp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 32px; margin-top: 64px; padding: 36px 40px; background-color: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 24px; -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(38, 73, 157, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(38, 73, 157, 0.08); color: #333333; text-decoration: none; -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease; } .works_lp:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 24px 70px rgba(38, 73, 157, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 24px 70px rgba(38, 73, 157, 0.12); } .works_lp-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .works_lp-label { margin-bottom: 12px; font-size: 14px; font-weight: bold; letter-spacing: .12em; color: #26499d; } .works_lp-title { font-size: 24px; font-weight: bold; line-height: 1.5; letter-spacing: .02em; color: #001e43; } .works_lp-note { margin-top: 6px; font-size: 12px; color: #4a4a4a; } .works_lp-text { margin-top: 14px; font-size: 15px; line-height: 1.8; } .works_lp-button { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 14px 32px; border-radius: 999px; background-color: #26499d; color: #ffffff; font-size: 16px; font-weight: bold; white-space: nowrap; } @media screen and (max-width: 1024px) { .works_lp { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 24px; } .works_lp-button { width: 100%; } } @media screen and (max-width: 767px) { .works_lp { margin-top: 48px; padding: 28px 24px; gap: 20px; } .works_lp-title { font-size: 19px; } .works_lp-text { font-size: 14px; } } /* ===== モバイル：ハンバーガーのメニューに背景を付けて文字を読みやすく ===== */ @media screen and (max-width: 767px) { .header .header_contents.is-open { background-color: #26499d !important; } .header_contents.is-open .header_nav-link:not(.button--bg), .header_contents.is-open .header_nav-link:not(.button--bg) .button_text { color: #fff !important; } } /* ===== 制作事例の動画（2026-10-02）===== 映像の3本は