.work-link, .work-link:hover { color: #FFF; } /* FAQ：質問・回答を均等揃え（PC・スマホ共通・トップページのFAQセクション含む） */ /* FAQ回答内の関連サービスリンク（水色寄り・下線で視認性を確保） */ .faq-section .accordion-item-description a.faq-service-link, .faq-style-1 .accordion-item-description a.faq-service-link { color: #4a9eb5; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.2s ease; } .faq-section .accordion-item-description a.faq-service-link:hover, .faq-style-1 .accordion-item-description a.faq-service-link:hover { color: #3a8a9f; } .accordion .accordion-item .accordion-item-header .accordion-item-header-title { text-align: justify !important; text-justify: inter-ideograph; } .accordion .accordion-item .accordion-item-description-wrapper .accordion-item-description p { text-align: justify !important; text-justify: inter-ideograph; } /* PC版：FAQ回答テキストの左右paddingを48pxに・Aの表示位置を35pxに */ @media screen and (min-width: 1065px) { .accordion .accordion-item .accordion-item-description-wrapper .accordion-item-description p { padding-left: 48px !important; padding-right: 48px !important; } .accordion .accordion-item .accordion-item-description-wrapper .accordion-item-description p::after { top: 35px !important; /* 32pxから35pxに下へ移動 */ } } /* PC版・スマホ版共通：Webページ上部の下余白を調整 */ .page-title-section.web-top .goodpath-content { padding-bottom: 150px !important; } /* 全デバイス共通：Webページの「01」フォントを統一 */ .page-title-section.web-top .goodpath-num { font-family: "Oswald", serif; font-weight: 400; color: #282B2D !important; } /* 全デバイス共通：Webページの「01」上の横線の長さ・色を統一（ヘッダーメニューと同じ #282B2D） */ .page-title-section.web-top .goodpath-num::before { width: 102%; background-color: #282B2D !important; } /* 全デバイス共通：Webページのページタイトル色を統一（ヘッダーメニューと同じ #282B2D） */ .page-title-section.web-top .goodpath-title { color: #282B2D !important; } /* スマホ版：Webページのトップ画像セクションをモバイルページと同一のUIに（半透明ボックス・シャドウ・余白等） */ @media screen and (max-width: 1064px) { .page-title-section.web-top .goodpath-content { position: relative; padding-top: 80px !important; padding-bottom: 40px !important; padding-left: 24px !important; box-sizing: border-box; margin-left: -24px; } .page-title-section.web-top .goodpath-content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 110px; width: 87%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.53) 12%, rgba(255, 255, 255, 0.53) 88%, rgba(255, 255, 255, 0) 100%); z-index: -1; } .page-title-section.web-top { position: relative; z-index: 1; background-position: 66% top; box-shadow: 1px 3px 11px rgba(120, 70, 50, 0.22); margin-bottom: 28px; border-bottom-right-radius: 0; } .page-title-section.web-top + .bg-overlay-section { margin-top: -28px; z-index: 0; } .page-title-section.web-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.01); /* 01スマホ版のみ */ border-bottom-right-radius: 0; z-index: 1; } .page-title-section.web-top .container { position: relative; z-index: 2; } .page-title-section.web-top .goodpath-num { font-size: 52px !important; padding-top: 0 !important; } } /* PC版：Webプロダクト開発の説明テキストを14pxに */ @media screen and (min-width: 1065px) { .page-title-section.web-top .goodpath-num { font-size: 49px !important; font-family: "Oswald", serif; font-weight: 400; } .page-title-section.web-top .goodpath-num::before { width: 102%; } .page-title-section.web-top .goodpath-title { font-size: 34px; padding-top: 20px; letter-spacing: 0; } .page-title-section.web-top .goodpath-article { font-size: 16px !important; line-height: 2.6 !important; text-align: justify; text-justify: inter-ideograph; max-width: 350px; padding-top: 18px; letter-spacing: -1px; } } /* モバイルページ：Webページと同一のUIパラメータ（3点セット・余白など） */ .page-title-section.mobile-top { box-shadow: -4px 2px 12px rgb(0 0 0 / 9%); } .page-title-section.mobile-top .goodpath-content { padding-bottom: 150px !important; } .page-title-section.mobile-top .goodpath-num { font-family: "Oswald", serif; font-weight: 400; color: #282B2D !important; } .page-title-section.mobile-top .goodpath-num::before { width: 102%; background-color: #282B2D !important; } .page-title-section.mobile-top .goodpath-title { color: #282B2D !important; } @media screen and (max-width: 1064px) { .page-title-section.mobile-top .goodpath-content { position: relative; padding-top: 80px !important; padding-bottom: 40px !important; padding-left: 24px !important; /* 左辺を画面端に接地しつつ、テキスト開始位置は24pxのまま維持 */ box-sizing: border-box; margin-left: -24px; /* 半透明ボックスの左辺を画面左端に接地（.col の padding-left を相殺） */ /* 背景は ::before で描画し、.goodpath-content 本体の幅は変更しない → .goodpath-article の横幅は従来どおり */ } .page-title-section.mobile-top .goodpath-content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 110px; /* 半透明ボックスの下辺を親要素の下端より110px上で終わらせる（テキスト・余白のレイアウトは変更しない） */ width: 87%; /* 右辺を左に寄せた半透明ボックスのみ。テキスト領域の幅には影響しない */ /* 上辺12%で透明→濃く、下辺12%で濃く→透明にし、境界を曖昧にする */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 12%, rgba(255, 255, 255, 0.5) 88%, rgba(255, 255, 255, 0) 100%); z-index: -1; } .page-title-section.mobile-top { position: relative; z-index: 1; /* 下辺シャドウを直後セクションより前面に描画するため */ /* overflow: hidden を外してシャドウが下端・角丸の下に描画されるようにする */ background-position: 58% top; box-shadow: 1px 3px 11px rgba(120, 70, 50, 0.22); /* スマホ版のみ・横1px右・縦3px下・ぼかし11px・オレンジ系 */ margin-bottom: 28px; /* シャドウ用の余白（直後セクションの margin-top: -28px で相殺し、見た目の余白は変更しない） */ border-bottom-right-radius: 0; /* スマホ版のみ右下角丸を無効 */ } /* トップ画像セクション直後の Works 等セクションを元の位置に戻し、余白を1pxも変えない */ .page-title-section.mobile-top + .bg-overlay-section { margin-top: -28px; z-index: 0; } .page-title-section.mobile-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.04); /* 背景画像をはっきり見せる（オーバーレイを弱く） */ border-bottom-right-radius: 0; /* スマホ版のみ右下角丸を無効 */ z-index: 1; } .page-title-section.mobile-top .container { position: relative; z-index: 2; } .page-title-section.mobile-top .goodpath-num { font-size: 52px !important; padding-top: 0 !important; } } @media screen and (min-width: 1065px) { .page-title-section.mobile-top { background-position: -10px top; } .page-title-section.mobile-top .goodpath-num { font-size: 49px !important; font-family: "Oswald", serif; font-weight: 400; } .page-title-section.mobile-top .goodpath-num::before { width: 102%; } .page-title-section.mobile-top .goodpath-title { font-size: 34px; padding-top: 20px; letter-spacing: 0; } .page-title-section.mobile-top .goodpath-article { font-size: 16px !important; line-height: 2.6 !important; text-align: justify; text-justify: inter-ideograph; max-width: 350px; padding-top: 18px; letter-spacing: -1px; } } /* Web3ページ：Webページと同一のUIパラメータ（3点セット・余白など） */ .page-title-section.web3-top { box-shadow: -4px 2px 12px rgb(0 0 0 / 9%); } .page-title-section.web3-top .goodpath-content { padding-bottom: 150px !important; } .page-title-section.web3-top .goodpath-num { font-family: "Oswald", serif; font-weight: 400; color: #282B2D !important; } .page-title-section.web3-top .goodpath-num::before { width: 102%; background-color: #282B2D !important; } .page-title-section.web3-top .goodpath-title { color: #282B2D !important; } @media screen and (max-width: 1064px) { /* Web3ページ：モバイルページと同一のスマホ版設定（半透明ボックス・シャドウ・余白等） */ .page-title-section.web3-top .goodpath-content { position: relative; padding-top: 80px !important; padding-bottom: 40px !important; padding-left: 24px !important; box-sizing: border-box; margin-left: -24px; } .page-title-section.web3-top .goodpath-content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 110px; width: 87%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 12%, rgba(255, 255, 255, 0.5) 88%, rgba(255, 255, 255, 0) 100%); z-index: -1; } .page-title-section.web3-top { position: relative; z-index: 1; background-image: url(../img/banner/Web３開発_Top_スマホ.png); background-position: 58% top; box-shadow: 1px 3px 11px rgba(120, 70, 50, 0.22); margin-bottom: 28px; border-bottom-right-radius: 0; } .page-title-section.web3-top + .bg-overlay-section { margin-top: -28px; z-index: 0; } .page-title-section.web3-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0); /* スマホ版のみ透明度100%（オーバーレイなし） */ border-bottom-right-radius: 0; z-index: 1; } .page-title-section.web3-top .container { position: relative; z-index: 2; } .page-title-section.web3-top .goodpath-num { font-size: 52px !important; padding-top: 0 !important; } } @media screen and (min-width: 1065px) { .page-title-section.web3-top { background-position: 40% top; /* 03 PC版：やや右寄せ */ } .page-title-section.web3-top .goodpath-num { font-size: 49px !important; font-family: "Oswald", serif; font-weight: 400; } .page-title-section.web3-top .goodpath-num::before { width: 102%; } .page-title-section.web3-top .goodpath-title { font-size: 34px; padding-top: 20px; letter-spacing: 0; } .page-title-section.web3-top .goodpath-article { font-size: 16px !important; line-height: 2.6 !important; text-align: justify; text-justify: inter-ideograph; max-width: 350px; padding-top: 18px; letter-spacing: -1px; } } /* Systemページ：Webページと同一のUIパラメータ */ .page-title-section.system-top { box-shadow: -4px 2px 12px rgb(0 0 0 / 9%); } .page-title-section.system-top .goodpath-content { padding-bottom: 150px !important; } .page-title-section.system-top .goodpath-num { font-family: "Oswald", serif; font-weight: 400; color: #282B2D !important; } .page-title-section.system-top .goodpath-num::before { width: 102%; background-color: #282B2D !important; } .page-title-section.system-top .goodpath-title { color: #282B2D !important; } @media screen and (max-width: 1064px) { /* Systemページ：モバイルページと同一のスマホ版設定（半透明ボックス・シャドウ・余白等） */ .page-title-section.system-top .goodpath-content { position: relative; padding-top: 80px !important; padding-bottom: 40px !important; padding-left: 24px !important; box-sizing: border-box; margin-left: -24px; } .page-title-section.system-top .goodpath-content::before { content: ''; position: absolute; left: 0; top: 0; bottom: 87px; /* 04スマホ：半透明ボックス下端 */ width: 87%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 12%, rgba(255, 255, 255, 0.72) 72%, rgba(255, 255, 255, 0) 100%); z-index: -1; } .page-title-section.system-top { position: relative; z-index: 1; background-image: url(../img/banner/WEBシステム開発_Top_スマホ.png); background-position: 40% top; /* 04スマホ：やや左寄せ（試し） */ box-shadow: 1px 3px 11px rgba(120, 70, 50, 0.22); margin-bottom: 28px; border-bottom-right-radius: 0; } .page-title-section.system-top + .bg-overlay-section { margin-top: -28px; z-index: 0; } .page-title-section.system-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.04); border-bottom-right-radius: 0; z-index: 1; } .page-title-section.system-top .container { position: relative; z-index: 2; } .page-title-section.system-top .goodpath-num { font-size: 52px !important; padding-top: 0 !important; } } @media screen and (min-width: 1065px) { /* 01〜04のPC版：右下角丸なし */ .page-title-section.web-top, .page-title-section.mobile-top, .page-title-section.web3-top, .page-title-section.system-top { border-bottom-right-radius: 0; } .page-title-section.system-top .goodpath-num { font-size: 49px !important; font-family: "Oswald", serif; font-weight: 400; } .page-title-section.system-top .goodpath-num::before { width: 102%; } .page-title-section.system-top .goodpath-title { font-size: 34px; padding-top: 20px; letter-spacing: 0; } .page-title-section.system-top .goodpath-article { font-size: 16px !important; line-height: 2.6 !important; text-align: justify; text-justify: inter-ideograph; max-width: 350px; padding-top: 18px; letter-spacing: -1px; } /* 英語版4ページ（Web / Mobile / Web3 / System）のPC版のみ：.goodpath-article の横幅・余白・字間（日本語版の-1pxを上書き） */ body.is-lang-en .page-title-section.web-top .goodpath-article, body.is-lang-en .page-title-section.mobile-top .goodpath-article, body.is-lang-en .page-title-section.web3-top .goodpath-article, body.is-lang-en .page-title-section.system-top .goodpath-article { max-width: 390px; padding-top: 16px; letter-spacing: 0; } } /* 最上位（スクロール前）のトップページ専用ヘッダー */ header.is-front:not(.scrollHeader), header.fixedHeader.is-front { background-color: rgba(255, 255, 255, 0); box-shadow: none !important; } header.is-front:not(.scrollHeader) .navbar-default, header.fixedHeader.is-front .navbar-default { border-bottom: none !important; box-shadow: none !important; } /* 最上位（スクロール前）のトップページ専用ヘッダー：メニューのフォントカラー */ header.is-front:not(.scrollHeader) .navbar-nav>li>a, header.fixedHeader.is-front .navbar-nav>li>a { color: #ffffffe0; font-weight: 400; font-family: "Caveat", cursive; font-size: 16px; padding-left: 1.2rem; padding-right: 1.2rem; } /* 最上位（スクロール前）のトップページ専用ヘッダー：Contactボタン */ header.is-front:not(.scrollHeader) .attr-nav .btn-style1, header.fixedHeader.is-front .attr-nav .btn-style1 { background-color: transparent; background: transparent; border-color: #ffffff4c; border-width: 1px; padding: 14px 39px !important; transform: translateY(2.8px); font-size: 16px; } header.is-front:not(.scrollHeader) .attr-nav .btn-style1 span, header.fixedHeader.is-front .attr-nav .btn-style1 span { color: #ffffffe0; font-family: "Caveat", cursive; font-weight: 400; } /* 最上位（スクロール前）のトップページ専用ヘッダー：Contactボタンのホバー時 */ header.is-front:not(.scrollHeader) .attr-nav .btn-style1:hover, header.fixedHeader.is-front .attr-nav .btn-style1:hover { border-color: #ffffff66 !important; /* 塗りつぶしの色は css/hero-tone.css（--oy-hero-hover-bg-alpha の背景色）で指定 */ } /* 最上位（スクロール前）のトップ以外ページ専用ヘッダー */ header.is-inner:not(.scrollHeader), header.fixedHeader.is-inner { background-color: rgba(255, 255, 255, 0); } /* スクロール前のトップ以外ページ専用ヘッダー：メニューのホバー時フォントカラー */ header.is-inner:not(.scrollHeader) .navbar-nav>li>a:hover, header.fixedHeader.is-inner .navbar-nav>li>a:hover { color: #3CB37A !important; } /* スクロール後のヘッダーメニューのホバー時フォントカラー */ header.scrollHeader .navbar-nav>li>a:hover { color: #3CB37A !important; } /* スクロール前のトップ以外ページ専用ヘッダー：Contactボタン */ header.is-inner:not(.scrollHeader) .attr-nav .btn-style1, header.fixedHeader.is-inner .attr-nav .btn-style1 { transform: translateY(3.1px); border-color: #282b2d !important; color: #282b2d !important; background-color: transparent !important; background: transparent !important; } header.is-inner:not(.scrollHeader) .attr-nav .btn-style1 span, header.fixedHeader.is-inner .attr-nav .btn-style1 span { color: #282b2d !important; } /* スクロール前のトップ以外ページ専用ヘッダー：Contactボタンのホバー時 */ header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:hover, header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:active, header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:focus, header.fixedHeader.is-inner .attr-nav .btn-style1:hover, header.fixedHeader.is-inner .attr-nav .btn-style1:active, header.fixedHeader.is-inner .attr-nav .btn-style1:focus { background-color: rgba(29, 31, 31, 0.0588) !important; /* 従来は背景 2% ＋ 左右の影 2% ×2 の重なり（1-0.98³≒5.88%）。同じ見た目の 1 色に */ background: rgba(29, 31, 31, 0.0588) !important; border-color: #1d1f1f !important; /* 枠線はそのまま（変更なし） */ color: #282b2d !important; /* ホバー前の色と同じ */ } header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:hover span, header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:active span, header.is-inner:not(.scrollHeader) .attr-nav .btn-style1:focus span, header.fixedHeader.is-inner .attr-nav .btn-style1:hover span, header.fixedHeader.is-inner .attr-nav .btn-style1:active span, header.fixedHeader.is-inner .attr-nav .btn-style1:focus span { color: #282b2d !important; /* ホバー前の色と同じ */ } /* アクティブ状態のメニュー項目の色を通常の色に統一（青色を無効化） */ /* スクロール前のトップ以外ページ */ header.is-inner:not(.scrollHeader) .navbar-nav li.active>a, header.is-inner:not(.scrollHeader) .navbar-nav li.current>a, header.fixedHeader.is-inner .navbar-nav li.active>a, header.fixedHeader.is-inner .navbar-nav li.current>a { color: #282b2d !important; } /* スクロール後の全ページ */ header.scrollHeader .navbar-nav li.active>a, header.scrollHeader .navbar-nav li.current>a { color: #282b2d !important; } /* トップページの最上位置（スクロール前）のアクティブ状態も通常の色に */ header.is-front:not(.scrollHeader) .navbar-nav li.active>a, header.is-front:not(.scrollHeader) .navbar-nav li.current>a, header.fixedHeader.is-front .navbar-nav li.active>a, header.fixedHeader.is-front .navbar-nav li.current>a { color: #ffffffe0 !important; } /* アクティブ状態の矢印装飾（after疑似要素）の色を通常の色に統一 */ /* スクロール前のトップ以外ページ */ header.is-inner:not(.scrollHeader) .navbar>ul>li.current>a:after, header.is-inner:not(.scrollHeader) .navbar>ul>li.active>a:after, header.fixedHeader.is-inner .navbar>ul>li.current>a:after, header.fixedHeader.is-inner .navbar>ul>li.active>a:after { border-color: transparent #282b2d #282b2d transparent !important; } /* スクロール後の全ページ */ header.scrollHeader .navbar>ul>li.current>a:after, header.scrollHeader .navbar>ul>li.active>a:after { border-color: transparent #282b2d #282b2d transparent !important; } /* トップページの最上位置（スクロール前）のアクティブ状態の矢印も通常の色に */ header.is-front:not(.scrollHeader) .navbar>ul>li.current>a:after, header.is-front:not(.scrollHeader) .navbar>ul>li.active>a:after, header.fixedHeader.is-front .navbar>ul>li.current>a:after, header.fixedHeader.is-front .navbar>ul>li.active>a:after { border-color: transparent #ffffffe0 #ffffffe0 transparent !important; } /* PC版：メニュー内のContact項目を非表示（Contactボタンと重複するため） */ @media screen and (min-width: 1065px) { header .navbar-nav>li:last-child { display: none !important; } } /* スクロール後のContactボタンの位置調整 */ header.scrollHeader .attr-nav .btn-style1 { transform: translateY(3.1px); border-color: #3CB37A !important; color: #3CB37A !important; } header.scrollHeader .attr-nav .btn-style1 span { color: #3CB37A !important; } /* スクロール後のContactボタンのホバー時 */ header.scrollHeader .attr-nav .btn-style1:hover, header.scrollHeader .attr-nav .btn-style1:active, header.scrollHeader .attr-nav .btn-style1:focus { border-color: #3CB37A !important; background-color: #3CB37A !important; /* 従来は左右の緑の影で全面を塗っていた。同じ結果の背景色に */ color: #ffffff !important; } header.scrollHeader .attr-nav .btn-style1:hover span, header.scrollHeader .attr-nav .btn-style1:active span, header.scrollHeader .attr-nav .btn-style1:focus span { color: #ffffff !important; } header .attr-nav .nav-contact-btn { display: inline-block; } /* ヘッダーの Contact ボタンの角丸：10px → 8px（角丸は3段階に統一：小さい部品 8px／大きいカード・枠 8px／枠内の入れ子 5px） */ header .attr-nav .btn-style1 { border-radius: 8px; } @media screen and (min-width: 1065px) { .menu_area .navbar { display: flex !important; align-items: center; width: 100%; } .navbar-header-custom { flex: 0 0 auto; display: flex; align-items: center; } .menu_area .navbar-nav { flex: 1 1 auto; display: flex !important; justify-content: flex-end; } header .attr-nav { flex: 0 0 auto; margin-left: 3.5rem !important; } /* PC版：スクロール前のメニュー間隔をコンパクトに（スクロール後と同じ） */ header.is-inner:not(.scrollHeader) .navbar-nav>li>a, header.fixedHeader.is-inner .navbar-nav>li>a { padding-left: 1rem !important; padding-right: 1rem !important; } /* PC版：スクロール後のメニュー間隔をコンパクトに */ header.scrollHeader .navbar-nav>li>a { padding-left: 1rem !important; padding-right: 1rem !important; } } @media screen and (max-width: 1198.98px) { header .attr-nav { margin-left: 2rem !important; } /* スクロール後のヘッダーでメニュー間隔を狭める（最上位バージョンには影響しない） */ header.scrollHeader .navbar-nav>li>a { padding-left: 1rem !important; padding-right: 1rem !important; } } @media screen and (max-width: 1064px) { /* 1064px以下の時、トップページの最上位置以外でヘッダーメニューの「TOP」項目を非表示 */ /* トップページの最上位置（スクロール前）は表示を維持 */ header.is-front:not(.scrollHeader) .navbar-nav>li:first-child, header.fixedHeader.is-front .navbar-nav>li:first-child { display: block !important; } } /* ヘッダーの左右パディングをすべての画面幅で2.9remに統一 */ .navbar-default .container-fluid { padding-left: 2.9rem !important; padding-right: 2.9rem !important; } /* 言語選択カード：トップページ最上位（スクロール前）専用 */ body.is-front-top .bogo-language-switcher li { background-color: transparent !important; background: transparent !important; border-color: #ffffff4c !important; border-width: 1px !important; padding: 4px 14px !important; cursor: pointer !important; transition: all 700ms !important; } body.is-front-top .bogo-language-switcher li:hover, body.is-front-top .bogo-language-switcher li:active { background-color: rgba(255, 255, 255, 0.09) !important; background: rgba(255, 255, 255, 0.09) !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } body.is-front-top .bogo-language-switcher a, body.is-front-top .bogo-language-switcher .bogo-language-name { color: #ffffffaf !important; font-family: "Caveat", cursive !important; font-size: 18px !important; font-weight: 300 !important; text-align: center !important; display: block !important; text-decoration: none !important; text-transform: lowercase !important; } body.is-front-top .bogo-language-switcher li:hover a, body.is-front-top .bogo-language-switcher li:active a, body.is-front-top .bogo-language-switcher li:hover .bogo-language-name, body.is-front-top .bogo-language-switcher li:active .bogo-language-name { color: #ffffffaf !important; } /* 言語選択カード：プライバシーポリシー／制作実績詳細の最上位（スクロール前）専用 */ body.is-privacy-top .bogo-language-switcher li { background-color: transparent !important; background: transparent !important; border-color: #ffffff4c !important; border-width: 1px !important; padding: 4px 14px !important; cursor: pointer !important; transition: all 700ms !important; box-shadow: none !important; } body.is-privacy-top .bogo-language-switcher li:hover, body.is-privacy-top .bogo-language-switcher li:active { background-color: rgba(255, 255, 255, 0.09) !important; background: rgba(255, 255, 255, 0.09) !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } body.is-privacy-top .bogo-language-switcher a, body.is-privacy-top .bogo-language-switcher .bogo-language-name { color: #ffffffaf !important; font-family: "Caveat", cursive !important; font-size: 18px !important; font-weight: 300 !important; text-align: center !important; display: block !important; text-decoration: none !important; text-transform: lowercase !important; } body.is-privacy-top .bogo-language-switcher li:hover a, body.is-privacy-top .bogo-language-switcher li:active a, body.is-privacy-top .bogo-language-switcher a:hover, body.is-privacy-top .bogo-language-switcher a:active, body.is-privacy-top .bogo-language-switcher a:focus, body.is-privacy-top .bogo-language-switcher li:hover .bogo-language-name, body.is-privacy-top .bogo-language-switcher li:active .bogo-language-name { color: #ffffffaf !important; } /* 制作実績詳細：リンク無し言語名（翻訳未設定時の素テキスト）も含めて同一スタイル ※ 案件詳細は is-case-detail へ移行済み。以下は旧 is-portfolio-detail + is-privacy-top 用の残置ルール */ body.is-portfolio-detail.is-privacy-top .bogo-language-switcher li, body.is-portfolio-detail.is-privacy-top .bogo-language-switcher li.current { background-color: transparent !important; background: transparent !important; border-color: #ffffff4c !important; box-shadow: none !important; } body.is-portfolio-detail.is-privacy-top .bogo-language-switcher a, body.is-portfolio-detail.is-privacy-top .bogo-language-switcher li.current a, body.is-portfolio-detail.is-privacy-top .bogo-language-switcher .bogo-language-name { color: #ffffffaf !important; font-family: "Caveat", cursive !important; font-size: 18px !important; font-weight: 300 !important; text-transform: lowercase !important; } /* スマホ版：プライバシー／制作実績詳細の最上位（スクロール前）専用 */ @media screen and (max-width: 1064px) { /* 制作実績詳細の言語選択（#ffffffaf）に統一。旧 rgba(160,160,160,0.97) はやめる */ body.is-privacy-top .bogo-language-switcher a, body.is-privacy-top .bogo-language-switcher .bogo-language-name { color: #ffffffaf !important; } body.is-privacy-top .bogo-language-switcher li:hover a, body.is-privacy-top .bogo-language-switcher li:active a, body.is-privacy-top .bogo-language-switcher li:hover .bogo-language-name, body.is-privacy-top .bogo-language-switcher li:active .bogo-language-name { color: #ffffffaf !important; } } /* jpカードのテキスト位置を少し上に調整（言語選択カード専用） */ .bogo-language-switcher a.lang-jp { transform: translateY(-1.3px) !important; } /* 言語選択カード：会社概要ページ最上位（スクロール前）専用 */ body.is-about-top .bogo-language-switcher li { background-color: rgba(255, 255, 255, 0.7) !important; background: rgba(255, 255, 255, 0.7) !important; border-color: #C0C2C2 !important; border-width: 1px !important; padding: 4px 14px !important; cursor: pointer !important; transition: all 700ms !important; } /* スマホ版：会社概要ページ最上位（スクロール前）はスクロール後と同じ設定 */ @media screen and (max-width: 1064px) { body.is-about-top .bogo-language-switcher li { background-color: rgba(255, 255, 255, 1) !important; background: rgba(255, 255, 255, 1) !important; border-color: #E3E5E5 !important; } } /* 言語選択カード：それ以外（トップ以外最上位、スクロール後） */ .bogo-language-switcher li { background-color: rgba(255, 255, 255, 0.78) !important; background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(66, 70, 70, 0.18) !important; border-width: 1px !important; /* スクロール後も1pxに統一 */ padding: 4px 14px !important; cursor: pointer !important; transition: all 700ms !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } .bogo-language-switcher li:hover, .bogo-language-switcher li:active { border-color: rgba(60, 179, 122, 0.6) !important; box-shadow: none !important; z-index: 1 !important; } .bogo-language-switcher a, .bogo-language-switcher .bogo-language-name { color: #424646c1 !important; font-family: "Caveat", cursive !important; font-size: 19px !important; font-weight: 500 !important; text-align: center !important; display: block !important; text-decoration: none !important; text-transform: lowercase !important; } .bogo-language-switcher li:hover a, .bogo-language-switcher li:active a, .bogo-language-switcher li:hover .bogo-language-name, .bogo-language-switcher li:active .bogo-language-name { color: #3CB37A !important; } /* 翻訳未設定で が無い場合でも、非ホバー時は緑にしない */ body.is-privacy-top .bogo-language-switcher li:hover .bogo-language-name, body.is-privacy-top .bogo-language-switcher li:active .bogo-language-name, body.is-front-top .bogo-language-switcher li:hover .bogo-language-name, body.is-front-top .bogo-language-switcher li:active .bogo-language-name { color: #ffffffaf !important; } /* トップ画像の縦幅を増やす（可変だが最小値を確保） */ section.banner-style01 { height: max(860px, calc(100vh - 27px)) !important; overflow: hidden !important; } .banner-style01 .slider-fade1.owl-carousel, .banner-style01 .slider-fade1 .owl-stage-outer, .banner-style01 .slider-fade1 .owl-stage, .banner-style01 .slider-fade1 .owl-item { height: max(860px, calc(100vh - 27px)) !important; } .banner-style01 .slider-fade1 .item { height: max(860px, calc(100vh - 27px)) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; min-height: max(860px, calc(100vh - 27px)) !important; overflow: hidden !important; } /* キャッチコピーをトップセクションの中央から少し下に配置 */ .banner-style01 .slider-fade1 .item .container { position: absolute !important; top: calc(50% + 33px) !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* ヒーローの日本語キャッチコピーのフォントサイズを少しだけ小さく */ .banner-style01 .main-title { font-size: 30px !important; /* reverted to 30px for desktop */ } /* トップ画像の縦幅を画面幅に応じて可変にする（最小値を確保） */ /* 小画面（〜1045px）: 最小値650pxを確保 */ @media screen and (max-width: 1045px) { section.banner-style01 { height: max(650px, calc(89vh - 27px)) !important; } .banner-style01 .slider-fade1.owl-carousel, .banner-style01 .slider-fade1 .owl-stage-outer, .banner-style01 .slider-fade1 .owl-stage, .banner-style01 .slider-fade1 .owl-item { height: max(650px, calc(89vh - 27px)) !important; } .banner-style01 .slider-fade1 .item { height: max(650px, calc(89vh - 27px)) !important; min-height: max(650px, calc(89vh - 27px)) !important; } /* 小画面でもトップセクションの中央から少し下に配置（500px以上の場合） */ @media screen and (min-width: 501px) { .banner-style01 .slider-fade1 .item .container { top: calc(50% + 33px) !important; } } } /* 大画面（1046px以上）: 最小値860pxを確保 */ @media screen and (min-width: 1046px) { section.banner-style01 { height: max(860px, calc(100vh - 27px)) !important; } .banner-style01 .slider-fade1.owl-carousel, .banner-style01 .slider-fade1 .owl-stage-outer, .banner-style01 .slider-fade1 .owl-stage, .banner-style01 .slider-fade1 .owl-item { height: max(860px, calc(100vh - 27px)) !important; } .banner-style01 .slider-fade1 .item { height: max(860px, calc(100vh - 27px)) !important; min-height: max(860px, calc(100vh - 27px)) !important; } } /* トップ画像下部の波線のあしらい：縦長の場合のみ縦幅を控えめに */ @media screen and (orientation: portrait) { .separator-section-double-wave { height: 94px !important; } } /* 1064pxの時だけヘッダー全体を非表示 */ @media screen and (min-width: 1064px) and (max-width: 1064.98px) { header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } } @media screen and (max-width: 1064px) { /* navbar-togglerの.bg-primaryスタイルを上書き */ header:not(.scrollHeader) .navbar-toggler.bg-primary, header.fixedHeader .navbar-toggler.bg-primary { background: transparent !important; background-color: transparent !important; } } @media screen and (max-width: 1064px) { .banner-style01 .main-title { font-size: 24px !important; } /* ヘッダー全体の左右パディングを変更 */ .navbar-default .container-fluid { padding-left: 0.2rem !important; padding-right: 1.3rem !important; } /* ロゴの位置を下にずらす */ .navbar-header-custom { padding-bottom: 0 !important; } .navbar-header-custom .navbar-brand { transform: translateY(12px) !important; } /* ロゴのスケールを設定（アニメーションが適用されていない場合のみ） */ .navbar-header-custom .navbar-brand img:not(.logo-float), .navbar-header-custom .navbar-brand #logo:not(.logo-float) { transform: scale(0.83) !important; } /* モバイル版用のロゴアニメーション（scale(0.83)を組み込む） */ @keyframes float-mobile { 0%, 85% { transform: scale(0.83) translateY(0px) rotate(0deg); } 87% { transform: scale(0.83) translateY(2px) rotate(1deg); } 90% { transform: scale(0.83) translateY(-8px) rotate(-5deg); } 93% { transform: scale(0.83) translateY(-4px) rotate(2deg); } 96% { transform: scale(0.83) translateY(1px) rotate(-0.5deg); } 100% { transform: scale(0.83) translateY(0px) rotate(0deg); } } /* モバイル版でアニメーションが適用されている場合（全てのページの非スクロール時） */ header:not(.scrollHeader) .navbar-header-custom .navbar-brand #logo.logo-float, header.fixedHeader .navbar-header-custom .navbar-brand #logo.logo-float { transform-origin: center center; animation: float-mobile 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite !important; will-change: transform; } /* Contactボタンを非表示 */ .nav-contact-btn { display: none !important; } /* ヘッダーの背景色を透明に */ header:not(.scrollHeader), header.fixedHeader, header.scrollHeader { background-color: rgba(255, 255, 255, 0) !important; box-shadow: none !important; opacity: 1 !important; border-bottom: none !important; } header:not(.scrollHeader) .navbar-default, header.fixedHeader .navbar-default, header.scrollHeader .navbar-default { background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; } /* 小画面でis-frontのscrollHeaderの場合、Contactボタンも透明に */ header.is-front.scrollHeader .attr-nav .btn-style1 { background-color: transparent !important; background: transparent !important; border-color: #ffffff4c !important; color: #ffffffe0 !important; transform: translateY(2.8px) !important; } header.is-front.scrollHeader .attr-nav .btn-style1 span { color: #ffffffe0 !important; } /* 小画面でis-frontのscrollHeaderの場合、Contactボタンのホバー時も透明スタイルに */ header.is-front.scrollHeader .attr-nav .btn-style1:hover, header.is-front.scrollHeader .attr-nav .btn-style1:active, header.is-front.scrollHeader .attr-nav .btn-style1:focus { border-color: #ffffff66 !important; box-shadow: inset 10em 0 0 0 rgba(255, 255, 255, 0.04), inset -10em 0 0 0 rgba(255, 255, 255, 0.04) !important; color: #ffffffe0 !important; } header.is-front.scrollHeader .attr-nav .btn-style1:hover span, header.is-front.scrollHeader .attr-nav .btn-style1:active span, header.is-front.scrollHeader .attr-nav .btn-style1:focus span { color: #ffffffe0 !important; } /* navbar-togglerを表示 */ header .navbar-toggler, header .navbar-toggler.bg-primary { display: flex !important; background: transparent !important; background-color: transparent !important; width: 40px !important; height: 40px !important; right: 0rem !important; top: 11px !important; } header .navbar-toggler:after { border-top: 0.8px solid rgba(140, 140, 140, 0.97) !important; border-bottom: 0.8px solid rgba(140, 140, 140, 0.97) !important; border-width: 0.8px !important; top: 25px !important; right: -2px !important; height: 19px !important; width: 38px !important; } header .navbar-toggler:before { border-top: 0.8px solid rgba(140, 140, 140, 0.97) !important; border-width: 0.8px !important; top: 34px !important; right: -2px !important; height: 0 !important; width: 38px !important; } header .navbar-toggler.menu-opened:after { border: 0 !important; top: 31px !important; right: 8px !important; height: 1.2px !important; width: 18px !important; background: rgba(140, 140, 140, 0.97) !important; transform: rotate(45deg) !important; } header .navbar-toggler.menu-opened:before { background: rgba(140, 140, 140, 0.97) !important; top: 31px !important; right: 8px !important; height: 1.2px !important; width: 18px !important; transform: rotate(-45deg) !important; } /* サービスページのスマホ版のみ：ハンバーガー（閉じているとき）を真っ黒に */ body.is-page-web-product header .navbar-toggler:not(.menu-opened):after, body.is-page-product-rescue header .navbar-toggler:not(.menu-opened):after { border-top: 0.8px solid #000 !important; border-bottom: 0.8px solid #000 !important; } body.is-page-web-product header .navbar-toggler:not(.menu-opened):before, body.is-page-product-rescue header .navbar-toggler:not(.menu-opened):before { border-top: 0.8px solid #000 !important; } /* スマホ・タブレット幅：ヘッダーの PC 用メニュー（ul#nav）は表示しない。 メニューは inc/mobile-menu.php の全画面メニューが担当する（旧：右から出る黒い半透明パネルの CSS は削除済み） */ header .navbar-nav { display: none !important; } /* 小画面用の言語選択カードのフォントカラーを背景色に馴染むように調整 */ body.is-front-top .bogo-language-switcher a, body.is-front-top .bogo-language-switcher .bogo-language-name { color: rgba(160, 160, 160, 0.97) !important; } body.is-front-top .bogo-language-switcher li:hover a, body.is-front-top .bogo-language-switcher li:active a, body.is-front-top .bogo-language-switcher li:hover .bogo-language-name, body.is-front-top .bogo-language-switcher li:active .bogo-language-name { color: rgba(160, 160, 160, 0.97) !important; } .bogo-language-switcher a, .bogo-language-switcher .bogo-language-name { color: rgba(66, 70, 70, 0.76) !important; } .bogo-language-switcher li { background-color: rgba(255, 255, 255, 0.78) !important; background: rgba(255, 255, 255, 0.78) !important; border-color: rgba(66, 70, 70, 0.18) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } .bogo-language-switcher li:hover a, .bogo-language-switcher li:active a, .bogo-language-switcher li:hover .bogo-language-name, .bogo-language-switcher li:active .bogo-language-name { color: #3CB37A !important; } } @media screen and (max-width: 575px) { /* 横スクロールのみ抑止（レイアウトは壊さない） */ html, body { overflow-x: hidden !important; } /* 親要素に内側余白だけ付与（左右端に当たらないように） */ .banner-style01 .slider-fade1 .item .container .row { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 1.5vw !important; padding-right: 1.5vw !important; box-sizing: border-box !important; } .banner-style01 .slider-fade1 .item .container .col-lg-12 { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .banner-style01 .main-title { /* 画面幅に応じて可変。常に1行で約92%幅を使用する目安 */ font-size: clamp(14px, 5.2vw, 24px) !important; white-space: nowrap !important; max-width: calc(100vw - 5vw) !important; /* 行の左右パディング(1.5vw*2) + 安全マージン(2vw)を差し引く */ box-sizing: border-box !important; display: inline-block !important; width: auto !important; word-break: keep-all !important; } .banner-style01 .main-title2 { font-size: 8px !important; /* smartphone - 英語も少し小さく */ max-width: 100% !important; } } /* ロゴのポップな跳ね上がりアニメーション - 何秒かに一回、重力を感じさせる跳ねる動き */ @keyframes float { 0%, 85% { transform: translateY(0px) rotate(0deg); } 87% { transform: translateY(2px) rotate(1deg); } 90% { transform: translateY(-8px) rotate(-5deg); } 93% { transform: translateY(-4px) rotate(2deg); } 96% { transform: translateY(1px) rotate(-0.5deg); } 100% { transform: translateY(0px) rotate(0deg); } } /* 全てのページの非スクロール時にロゴにアニメーションを適用 */ header:not(.scrollHeader) #logo.logo-float, header.fixedHeader #logo.logo-float { transform-origin: center center; animation: float 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; will-change: transform; } /* 小画面用のキャッチコピーを3行で左表示（モダンなデザイン） */ @media screen and (max-width: 500px) { /* キャッチコピーのコンテナを左に配置（画像下部基準） */ .banner-style01 .slider-fade1 .item .container { top: auto !important; bottom: 8% !important; left: 12px !important; right: auto !important; transform: none !important; text-align: left !important; width: auto !important; max-width: 100% !important; } /* キャッチコピーの行を左寄せに */ .banner-style01 .slider-fade1 .item .container .row { justify-content: flex-start !important; text-align: left !important; } /* メインタイトルを3行表示に変更 */ .banner-style01 .main-title { font-size: 0 !important; text-transform: none !important; line-height: 1.6 !important; text-align: left !important; } /* 3行構成で表示（シンプルな方式） */ .banner-style01 .main-title::before { content: "世界一、\A気軽にアプリ開発を\A頼める会社。"; font-size: 20px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; display: block; color: rgba(255, 255, 255, 0.58) !important; text-transform: none !important; line-height: 2.3 !important; text-align: left !important; white-space: pre-line; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } /* ::afterは使用しない */ .banner-style01 .main-title::after { content: none; } /* 英語のサブタイトルを表示（筆記体に統一、3行構成） */ .banner-style01 .main-title2 { font-size: 0 !important; display: block !important; } .banner-style01 .main-title2::before { content: "The world's\A most convenient company\A for app development."; font-size: 15px !important; font-weight: 200 !important; font-family: "Caveat", "Brush Script MT", cursive !important; color: rgba(255, 255, 255, 0.58) !important; text-align: left !important; display: block !important; margin-top: -1.0em !important; letter-spacing: 0.05em !important; line-height: 2.1 !important; white-space: pre-line !important; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } } /* 共通（PC版・スマホ版）：サービスタイトルのpadding右を4pxに変更 */ .service-section .service-title { padding-right: 4px !important; /* 右側のpaddingを4pxに変更 */ } /* スマホ版のみ・全ページ共通：セクションサブタイトル下の横線あしらいを非表示（PC版は従来通り表示） */ @media screen and (max-width: 1064px) { .section-title .sm-title1:before { display: none !important; } } /* スマホ版：会社概要ページ・社長挨拶ページのみ横線あしらいを表示 */ @media screen and (max-width: 1064px) { .content-about-container .section-title .sm-title1:before, .content-message-container1 .section-title .sm-title1:before { display: block !important; } } /* スマホ版：Works・料金イメージセクションのタイトル・サブタイトル・横線のデザイン統一 */ @media screen and (max-width: 1064px) { .works-section .section-title h3 { font-size: 49px !important; line-height: 1.1 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 9px !important; } .works-section .section-title .sm-title1 { font-size: 13.5px !important; margin-bottom: 20px !important; padding-bottom: 14px !important; } .works-section .section-title { margin-bottom: 0 !important; } /* 料金イメージセクションのタイトル・サブタイトル・横線をWorksセクションと同じパラメータに統一 */ .pricing-section .section-title h3 { font-size: 49px !important; line-height: 1.1 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 9px !important; } .pricing-section .section-title .sm-title1 { font-size: 13.5px !important; margin-bottom: 20px !important; padding-bottom: 14px !important; } .pricing-section .section-title { margin-bottom: 0 !important; } /* Skillsセクションのタイトル・サブタイトルをWorksセクションと同じパラメータに統一 */ .skills-section .section-title h3 { font-size: 49px !important; line-height: 1.1 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 9px !important; } .skills-section .section-title .sm-title1 { font-size: 13.5px !important; margin-bottom: 20px !important; padding-bottom: 14px !important; } .skills-section .section-title { margin-bottom: 0 !important; } /* FAQセクションのタイトル・サブタイトルをWorksセクションと同じパラメータに統一 */ /* ※.faq-sectionはトップ以外（page-web-product等）のみで使用。トップは.faq-style-1+.exrta-sectionのため影響なし */ .faq-section .section-title h3 { font-size: 49px !important; line-height: 1.1 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 9px !important; } .faq-section .section-title .sm-title1 { font-size: 13.5px !important; margin-bottom: 40px !important; padding-bottom: 14px !important; } .faq-section .section-title { margin-bottom: 0 !important; } /* 横線のあしらいはデフォルトの.sm-title1:before（3px・27px・#dedede）を継承 */ } /* スマホ版：FAQセクション（トップ以外のみ・.faq-section）のpaddingを指定 */ @media screen and (max-width: 1064px) { .faq-section { padding-top: 90px !important; padding-bottom: 110px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* Webページ（Works〜Skills）の背景：bg-20.png を非表示・bg-19.png のみ表示（PC・スマホ共通。差し替え用にPHP側の記述は残す） */ .bg-overlay-section { background-image: url('../img/bg/bg-19.png') !important; background-repeat: repeat-y !important; background-position: top center !important; background-size: 100% auto !important; } /* スマホ版：Worksセクションの上下左右paddingを指定（他ページで使用時も同じ設定） */ @media screen and (max-width: 1064px) { .works-section { padding-top: 36px !important; padding-bottom: 77px !important; padding-left: 6px !important; padding-right: 6px !important; } } /* スマホ版のみ：Works・料金イメージ・Skillsセクションのコンテナ左右paddingをゼロに */ @media screen and (max-width: 1064px) { .works-section .container, .pricing-section .container, .skills-section .container { padding-left: 0 !important; padding-right: 0 !important; } } /* スマホ版：料金イメージセクションの上下左右paddingを指定（他ページで使用時も同じ設定） */ @media screen and (max-width: 1064px) { .pricing-section { padding-top: 36px !important; padding-bottom: 77px !important; padding-left: 6px !important; padding-right: 6px !important; } } /* スマホ版：Skillsセクションの上下左右paddingを指定（他ページでSkillsを使う場合も同じ設定） */ @media screen and (max-width: 1064px) { .skills-section { padding-top: 36px !important; padding-bottom: 50px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* スマホ版のみ：Skillsセクションのカテゴリ名のフォントサイズを16pxに・margin-bottomを6pxに */ @media screen and (max-width: 1064px) { .skill-content h5 { font-size: 16px !important; margin-bottom: 6px !important; } } /* スマホ版のみ：Skillsセクションのスキルコンテンツブロックのpaddingを調整 */ @media screen and (max-width: 1064px) { /* 2個目以降：padding-topを23pxに（共通の40pxを上書き） */ .skills-section .skill-content { padding-top: 23px !important; } /* 一番上のみ：padding-topを20pxに */ .skills-section .container > .skill-content:nth-child(2) { padding-top: 20px !important; } /* 最後のスキルコンテンツ：padding-top 23px・padding-bottom 10pxに */ .skills-section .skill-content:last-of-type { padding-top: 23px !important; padding-bottom: 10px !important; } } /* スマホ版のみ：スキル名（タグ）のフォントサイズ・padding・タグ間の間隔を調整 */ @media screen and (max-width: 1064px) { .skill-list { gap: 9.6px !important; } .skill-list span { font-size: 11px !important; padding-top: 7px !important; padding-bottom: 7px !important; padding-left: 10.5px !important; padding-right: 10.5px !important; } } /* スマホ版のみ：縦並び時の案件カード間の空白を狭める（PC版の横並び間隔は変更しない） */ @media screen and (max-width: 1064px) { .portfolio-gallery.row, .row.gx-xxl-5 { gap: 4px !important; } } /* スマホ版のみ：案件カード内のテキストエリア（portfolio-content）の上下paddingを調整 */ @media screen and (max-width: 1064px) { .portfolio-gallery .portfolio-content { padding-top: 0 !important; padding-bottom: 10px !important; gap: 0 !important; /* flexの子要素（タイトルとカテゴリ）の間の空白をゼロに */ } /* 案件タイトルの下に5pxの余白・フォントを少し大きく（スマホ版のみ） */ /* h5のfont-sizeは触らない（.h4の1.5remを維持）。spanだけ0.88emにするとh5基準で少し大きくなる */ .portfolio-gallery .portfolio-content h5.port-text { margin-bottom: 7px !important; font-weight: 500 !important; } .portfolio-gallery .portfolio-content h5.port-text.d-block.h4.portfolio-link span { font-weight: 500 !important; font-size: 0.8em !important; } /* カテゴリ名（「WEBシステム開発」など）を少し大きく・左右に2pxのpadding（スマホ版のみ） */ .portfolio-gallery .portfolio-content .port-text.text-primary.mb-1.font-weight-600.small { font-size: 0.92em !important; padding-left: 2px !important; padding-right: 2px !important; } } /* スマホ版：Serviceセクションのタイトルを上に移動 */ @media screen and (max-width: 1064px) { .service-section .section-title h3 { margin-top: 10px !important; /* デスクトップ版の100pxから10pxに変更 */ font-size: 42px !important; /* デスクトップ版の58pxから42pxに変更 */ margin-bottom: 4px !important; /* デスクトップ版の13pxから4pxに変更（間隔を狭める） */ } .service-section .section-title .sm-title1 { font-size: 12px !important; /* デスクトップ版の14pxから12pxに変更 */ margin-bottom: 25px !important; /* デスクトップ版の64pxから25pxに変更（間隔を狭める） */ padding-bottom: 5px !important; /* デスクトップ版の12pxから5pxに変更（横線との間隔を狭める） */ } .service-section .section-title .sm-title1:before { bottom: -12px !important; /* デスクトップ版の-22pxから-12pxに変更（横線の位置を調整） */ } /* スマホ版：FAQセクションのタイトルは .faq-content の中に入れた。文字サイズ・余白は home.css で定義 */ /* スマホ版：FAQセクション全体の横幅を広げる（Servicesセクションと同じ設定） */ .faq-style-1 { padding-left: 0.5rem !important; /* Servicesセクションと同じ（グレー背景の横幅を統一するため） */ padding-right: 0.5rem !important; /* Servicesセクションと同じ（グレー背景の横幅を統一するため） */ z-index: 1 !important; /* styles.cssのz-index: 99を上書きして、言語選択カード（z-index: 10）より奥に配置 */ } /* スマホ版：FAQセクションのコンテナの横幅を広げる（Servicesセクションと同じ設定） */ .faq-style-1 .container { max-width: 506px !important; /* Servicesセクションと同じ（上限490px+左右padding） */ margin-left: auto !important; margin-right: auto !important; padding-left: 0.5rem !important; /* Servicesセクションと同じ（グレー背景の横幅を統一するため） */ padding-right: 0.5rem !important; /* Servicesセクションと同じ（グレー背景の横幅を統一するため） */ width: 100% !important; /* Servicesセクションと同じ */ } /* スマホ版：FAQリスト（グレー背景）の横幅をServicesセクションの表リストと完全に統一 */ .faq-style-1 .faq-content { width: 100% !important; /* Servicesセクションの.service-listと同じ（width: 100%） */ margin-left: 0 !important; /* Servicesセクションの.service-listと同じ */ margin-right: 0 !important; /* Servicesセクションの.service-listと同じ */ margin-bottom: 52px !important; /* スマホ版のみ最下部の空白を狭める（175pxから52pxに変更） */ padding-left: 16px; padding-right: 16px; position: relative; z-index: 0 !important; /* 言語選択カード（z-index: 10）より奥に配置 */ } /* スマホ版：FAQセクション内のrowと列の制限を解除 */ .faq-style-1 .row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; /* paddingを削除して、グレー背景の横幅を広げる */ padding-right: 0 !important; /* paddingを削除して、グレー背景の横幅を広げる */ justify-content: center !important; /* 中央揃えにする */ } /* スマホ版：Bootstrapのデフォルトpaddingを上書きし、列のpaddingを0にして、グレー背景の横幅をServicesセクションと統一 */ .faq-style-1 .row > * { padding-left: 0 !important; /* Bootstrapのデフォルトpaddingを上書き */ padding-right: 0 !important; /* Bootstrapのデフォルトpaddingを上書き */ } /* スマホ版：列のpaddingを0にして、グレー背景の横幅をServicesセクションと統一 */ .faq-style-1 .col-12 { max-width: calc(100%) !important; flex: 0 0 calc(100%) !important; padding-left: 0 !important; /* グレー背景の横幅をServicesセクションと統一するため、paddingを0に */ padding-right: 0 !important; /* グレー背景の横幅をServicesセクションと統一するため、paddingを0に */ margin-left: 0 !important; margin-right: 0 !important; } /* スマホ版：.section--faq_contentのpaddingを解除（グレー背景の横幅をServicesセクションと統一するため） */ .faq-style-1 .section--faq_content { padding: 0 !important; /* styles.cssのpadding: 0 30pxを上書きし、グレー背景の横幅をServicesセクションと統一 */ width: 100% !important; } /* スマホ版：FAQの質問ボックス間のgapを16pxに */ .accordion { gap: 16px !important; } /* スマホ版：FAQアコーディオンアイテムのpaddingを変更 */ .accordion .accordion-item { padding: 2px 20px !important; /* スマホ版のみ 左右20px */ } /* スマホ版：FAQアコーディオンのヘッダーのpadding-leftを変更 */ .accordion .accordion-item .accordion-item-header { padding-left: 26px !important; /* スマホ版のみ */ padding-right: 0 !important; /* スマホ版のみ */ } /* スマホ版：FAQアコーディオンの質問テキストのフォントサイズを小さく、文字間を狭める */ .accordion .accordion-item .accordion-item-header .accordion-item-header-title { font-size: 12px !important; /* スマホ版のみ */ letter-spacing: -0.3px !important; /* 文字間を狭める */ padding-left: 9px !important; padding-right: 19px !important; } /* スマホ版：FAQアコーディオンの回答テキストのフォントサイズを小さく、文字間を狭める、行間を調整 */ .accordion .accordion-item .accordion-item-description-wrapper .accordion-item-description p { font-size: 12px !important; /* スマホ版のみ */ letter-spacing: -0.3px !important; /* 文字間を狭める */ line-height: 2.2 !important; /* 行間を調整 */ padding-left: 35px !important; /* スマホ版のみ */ padding-right: 35px !important; /* スマホ版のみ */ } /* スマホ版：FAQの質問と回答の左側の「Q.」と「A.」のサイズを変更 */ .accordion .accordion-item .accordion-item-header::after { font-size: 17px !important; /* スマホ版のみ */ } .accordion .accordion-item .accordion-item-description-wrapper .accordion-item-description p::after { font-size: 17px !important; /* スマホ版のみ */ } /* スマホ版：FAQアコーディオンの右側の矢印アイコンのサイズを小さく・縮まないように固定 */ /* 原因：ヘッダーがflexのため、質問文が長いカードでアイコンにflex-shrinkが効き見た目がばらついていた */ .accordion .accordion-item .accordion-item-header .accordion-item-header-icon { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; flex-shrink: 0 !important; } /* スマホ版：Serviceリストを2列×3行のグリッド表示に変更 */ .service-section .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 1列から2列に変更 */ } /* スマホ版：Serviceセクション全体の横幅を広げる */ .service-section { padding-left: 0.5rem !important; /* 少し余白を追加 */ padding-right: 0.5rem !important; /* 少し余白を追加 */ } /* スマホ版：Serviceセクションのコンテナの横幅を広げる */ .service-section .container { max-width: 506px !important; /* リスト幅の上限490px(+左右padding)。それ以上の画面幅では中央寄せで固定 */ margin-left: auto !important; margin-right: auto !important; padding-left: 0.5rem !important; /* 少しパディングを追加 */ padding-right: 0.5rem !important; /* 少しパディングを追加 */ width: 100% !important; } /* スマホ版：Serviceリストを右側まで広げる（言語選択カードに被っても良い） */ .service-section .service-list { width: 100% !important; margin-right: 0 !important; position: relative; z-index: 1 !important; /* 言語選択カードより奥に配置 */ } /* スマホ版：Serviceリスト内の数字（01-06）のフォントサイズを小さく */ .service-section .service-item .service-order { font-size: 42px !important; /* デスクトップ版の60pxから42pxに変更 */ margin-top: 15px !important; /* デスクトップ版の25pxから15pxに変更 */ } /* スマホ版：Serviceリスト内の数字の上の横線の横幅を縮小 */ .service-section .service-item::before { width: 45px !important; /* デスクトップ版の65pxから45pxに変更 */ } /* スマホ版：Serviceリスト内のアイコン画像の表示・位置調整 */ .service-section .service-item [alt="service-icon-img"] { position: absolute !important; height: auto !important; margin: 0 !important; /* インラインスタイルのmarginをリセット */ opacity: 0.78 !important; /* 透明度を調整 */ right: auto !important; /* right指定を解除 */ } /* 数字の幅を推定（42pxフォントサイズ、2桁最大幅、実際の幅を考慮して約40px） */ /* 数字の左端: 11%（左パディング） */ /* 数字の右端: 11% + 40px */ /* 空白スペースの右端: 100% - 8%（右パディング） = 92% */ /* 空白スペースの中央（アイコンの中心位置） = (数字の右端 + 空白スペースの右端) / 2 = (11% + 40px + 92%) / 2 = 51.5% + 20px */ /* アイコンの左端位置 = 中央位置 - アイコン幅/2 */ /* 各アイコンごとに元のサイズ比と位置比を維持して縮小（約65%に縮小） */ /* 空白スペースの中央に配置（個別偏差は無効） */ /* スマホ版：01〜05を03のサイズ・位置に統一、透明度はPC版の値を適用 */ .service-section .service-item-1 [alt="service-icon-img"] { width: 142px !important; top: 29px !important; opacity: 0.78 !important; left: calc(51.5% + 23px - 69px) !important; } .service-section .service-item-2 [alt="service-icon-img"] { width: 112px !important; top: 40px !important; opacity: 0.86 !important; left: calc(51.5% + 24px - 56px) !important; } .service-section .service-item-3 [alt="service-icon-img"] { width: 130px !important; top: 35px !important; opacity: 0.78 !important; left: calc(51.5% + 13px - 65px) !important; } .service-section .service-item-4 [alt="service-icon-img"] { width: 131px !important; top: 36px !important; opacity: 0.68 !important; left: calc(51.5% + 17px - 65.5px) !important; } .service-section .service-item-5 [alt="service-icon-img"] { width: 152px !important; top: 27px !important; opacity: 0.78 !important; left: calc(51.5% + 9px - 69px) !important; } .service-section .service-item-6 [alt="service-icon-img"] { width: 144px !important; top: 30px !important; left: calc(51.5% + 12px - 69px) !important; opacity: 0.78 !important; } /* アイコンの大きさ・位置をカード幅(.service-item内容幅)に対する割合で指定。 425px幅での見え方を基準値とし、カード幅の増減に比例して拡縮する。 上記のpx指定は cqw 非対応ブラウザ向けのフォールバック。 ・大きさ(--iw)はカード幅に比例（425px幅の1.25倍＝上限490px幅のカード相当で頭打ち） ・縦位置は「絵の下端」をタイトル文字の手前で固定し、大きくなると上へ伸びる（文字に被らない） ・横位置は絵の中心をカード幅に対する割合で固定 */ @supports (width: 1cqw) { .service-section .service-item-1 [alt="service-icon-img"] { --iw: min(89.88cqw, 177.5px); width: var(--iw) !important; left: calc(79.62cqw - var(--iw) / 2) !important; top: calc(144.7px - 0.815 * var(--iw)) !important; } .service-section .service-item-2 [alt="service-icon-img"] { --iw: min(70.89cqw, 140px); width: var(--iw) !important; left: calc(78.985cqw - var(--iw) / 2) !important; top: calc(134.5px - 0.844 * var(--iw)) !important; } .service-section .service-item-3 [alt="service-icon-img"] { --iw: min(82.28cqw, 162.5px); width: var(--iw) !important; left: calc(72.02cqw - var(--iw) / 2) !important; top: calc(116.1px - 0.624 * var(--iw)) !important; } .service-section .service-item-4 [alt="service-icon-img"] { --iw: min(82.92cqw, 163.75px); width: var(--iw) !important; left: calc(74.55cqw - var(--iw) / 2) !important; top: calc(133.6px - 0.745 * var(--iw)) !important; } .service-section .service-item-5 [alt="service-icon-img"] { --iw: min(96.21cqw, 190px); width: var(--iw) !important; left: calc(73.925cqw - var(--iw) / 2) !important; top: calc(138.1px - 0.731 * var(--iw)) !important; } .service-section .service-item-6 [alt="service-icon-img"] { --iw: min(91.14cqw, 180px); width: var(--iw) !important; left: calc(73.28cqw - var(--iw) / 2) !important; top: calc(120.2px - 0.6263 * var(--iw)) !important; } } /* スマホ版：リスト表のグレー背景は残す（左辺と下辺の枠線のため） */ /* グレー背景の角丸を白背景の角丸に合わせて調整 */ .service-section .service-list { /* 背景色は残す（グリッドの隙間と左辺・下辺の枠線のため） */ /* borderは残す（左辺と下辺の枠線のため） */ border-top-left-radius: 8px !important; /* 左上：service-item-1に合わせる */ border-top-right-radius: 8px !important; /* 右上：service-item-2に合わせる */ border-bottom-left-radius: 8px !important; /* 左下：service-item-5に合わせる */ border-bottom-right-radius: 8px !important; /* 右下：service-item-6に合わせる */ overflow: hidden !important; /* 角丸部分のグレーが見えないように */ } /* スマホ版：リスト表の角丸を調整（PC版とは別設定） */ /* PC版の角丸設定を無効化 */ .service-section .service-item-1, .service-section .service-item-2, .service-section .service-item-3, .service-section .service-item-4, .service-section .service-item-5, .service-section .service-item-6 { border-radius: 0 !important; /* PC版の角丸を無効化 */ background-color: white !important; /* 角丸部分でグレーが見えないように白背景を明示 */ /* ボーダーは残す（枠線は必要） */ } /* スマホ版：01の左上、02の右上、05の左下、06の右下のみをシンプルな角丸に */ .service-section .service-item-1 { border-top-left-radius: 8px !important; /* 左上のみ角丸（シンプルに） */ } .service-section .service-item-2 { border-top-right-radius: 8px !important; /* 右上のみ角丸（シンプルに） */ } .service-section .service-item-5 { border-bottom-left-radius: 8px !important; /* 左下のみ角丸（シンプルに） */ } .service-section .service-item-6 { border-bottom-right-radius: 8px !important; /* 右下のみ角丸（シンプルに） */ } /* スマホ版：セクション自体の右下の角丸を33pxに変更、リスト表下部の空白スペースを調整 */ .service-section { border-bottom-right-radius: 33px !important; /* デスクトップ版の80pxから33pxに変更 */ padding-bottom: 77px !important; /* デスクトップ版の200pxから74pxに変更 */ } /* スマホ版：リストボックスの左右パディングを変更（左11%、右8%） */ .service-section .service-item { padding: 0 8% 9% 11% !important; /* 左11%、右8%、上下は維持 */ } /* スマホ版：数字の上の横線の位置を左にずらす（パディング変更に合わせて） */ .service-section .service-item::before { left: 11% !important; /* 左側のパディングに合わせて11% */ } /* スマホ版：サービスタイトルのフォントサイズを小さく、文字間を狭める、表示位置を上に上げる */ .service-section .service-title { font-size: 13px !important; /* スマホ版：14pxから13pxに変更 */ letter-spacing: -0.7px !important; /* 文字間をさらに狭める */ padding-top: 58px !important; /* デスクトップ版の89pxから58pxに変更（少し上に） */ margin: 0px 0px 4px 0px !important; /* デスクトップ版の8pxから4pxに変更 */ } /* スマホ版：サービスタイトル内の
タグによる改行を無効化 */ .service-section .service-title br { display: none !important; } /* スマホ版：本文テキストのフォントサイズを小さく、行間を狭める、文字間を狭める */ .service-section .desc { font-size: 10.5px !important; /* デスクトップ版の14pxから10.5pxに変更 */ line-height: 1.7 !important; /* デスクトップ版の2から1.7に変更（行間を狭める） */ letter-spacing: -0.5px !important; /* 文字間をさらに狭める */ padding: 0px 5px 3px 5px !important; /* デスクトップ版の0px 5px 4px 5pxから3pxに変更 */ } /* スマホ版：日本語版のみ説明文を均等揃え（英語版には適用しない） */ .service-section.service-section--jp .desc { text-align: justify !important; text-justify: inter-ideograph; } /* スマホ版：02、03、06のブロックで常時薄い内側シャドウを適用（テキストカラーは変更しない） */ .service-section .service-item-2, .service-section .service-item-3, .service-section .service-item-6 { box-shadow: inset 0px 0px 12px 0.4px rgba(238, 238, 238, 0.3) !important; /* 常時薄い内側シャドウ */ z-index: 1 !important; } /* スマホ版：全ブロック共通でホバー時（タップ時）に濃い内側シャドウを適用 */ .service-section .service-item-1:hover, .service-section .service-item-1:active, .service-section .service-item-2:hover, .service-section .service-item-2:active, .service-section .service-item-3:hover, .service-section .service-item-3:active, .service-section .service-item-4:hover, .service-section .service-item-4:active, .service-section .service-item-5:hover, .service-section .service-item-5:active, .service-section .service-item-6:hover, .service-section .service-item-6:active { box-shadow: inset 0px 0px 12px 0.4px #eeeeeeaf !important; /* ホバー時の濃い内側シャドウ */ z-index: 1 !important; } } /* スマホ版：フッター調整 */ @media screen and (max-width: 1064px) { /* スマホ版：フッターの会社ロゴのサイズを少し大きく */ .footer-logo { max-width: 235px !important; /* 220pxから235pxに少し大きく */ width: auto !important; /* styles.cssのwidth: 100%を上書きして、アスペクト比を保持 */ margin-bottom: 2rem !important; /* スマホ版のみ下の余白を2remに広げる */ } .footer-logo img { height: 56px !important; /* 52pxから56pxに少し大きく（インラインスタイルを上書き） */ width: auto !important; /* アスペクト比を保持するため、幅を自動に */ object-fit: contain !important; /* アスペクト比を保持して表示 */ } /* スマホ版：フッターメニューを縦に中央揃えで並べる */ footer .flex.justify-content-center { flex-direction: column !important; /* 横並びから縦並びに変更 */ align-items: center !important; /* 縦並びの場合の中央揃え */ gap: 0.85rem !important; /* 0.7remから0.85remに少し広げる */ } /* スマホ版：フッターメニューのフォントサイズを調整 */ footer .flex.justify-content-center a { font-size: 13.5px !important; /* 13pxから13.5pxに0.5px大きく */ } /* スマホ版：フッターの会社ロゴの上の空白スペースを広げる */ footer .text-center.mt-2-50 { margin-top: 6.5rem !important; /* 6remから6.5remにさらに広げる */ } /* スマホ版：SNSロゴリンクの上部の余白を少し広げる、下部の余白を広げる */ footer .social-icon-style1 { margin-top: 1.5rem !important; /* 上部の余白を追加 */ padding-bottom: 4rem !important; /* 3.5remから4remに少し広げる */ } /* スマホ版：SNSロゴリンクの下の空白スペースを広げる */ footer .mt-n2-9.pb-3 { padding-bottom: 1.2rem !important; /* 1remから1.2remに少し広げる */ } } /* PC版：フッターのSNSアイコンの下の余白を少し広げる */ @media screen and (min-width: 1065px) { footer .social-icon-style1 { padding-bottom: 40px !important; /* 36pxから40pxに少し広げる */ } /* PC版：フッターの会社ロゴの上の余白を狭める */ footer .text-center.mt-2-50 { margin-top: 3.5rem !important; /* 3remから3.5remに少し広げる */ } /* PC版：フッターの会社ロゴのサイズを大きく */ footer .footer-logo { max-width: 340px !important; /* 320pxから340pxにさらに大きく */ width: auto !important; /* styles.cssのwidth: 100%を上書きして、アスペクト比を保持 */ } footer .footer-logo img { height: 86px !important; /* 80pxから86pxにさらに大きく（インラインスタイルを上書き） */ width: auto !important; /* アスペクト比を保持するため、幅を自動に */ object-fit: contain !important; /* アスペクト比を保持して表示 */ } } /* フッターの配色：ほぼ黒で、ページ全体の暖色の配色（クリーム #F7F5F1／オレンジブラウン／ウォーターマークのオレンジ）に調和させる。全ページ共通 ・背景：#3A342E → #1A1A19。より黒寄りだが、彩度をさらに抑え、暖色の気配だけをうっすら残したマットな黒（深い黒の光沢感を避け、暖色ページに馴染ませる） ・メニュー・SNS アイコン・コピーライト：彩度を抑えたクリーム rgb(226,219,209) の 64%（背景 #1A1A19 と混ざって約 #9A958E の落ち着いたグレージュ。コントラストを下げて眩しさを抑える） ・コピーライト直前の横線：ウォーターマーク系オレンジ寄りのベージュ rgb(224,196,168) の 13%（従来どおりのかなり控えめな視認性） ・ホバー：ページのウォーターマークと同系のオレンジ #D9A27C ・コピーライト帯（.footer-copyright）：HTML の閉じタグの都合で