*,
*::before,
*::after {
box-sizing: border-box;
}
/* 全体設定 */
body {
font-family: "Noto Sans JP", sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
body.menu-open {
overflow: hidden;
}
/* ヘッダーとナビゲーション */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #003366; /* ヘッダー色 */
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
}
.logo {
width: 50px; /* ロゴのサイズ */
height: auto;
margin-right: 10px;
}
.company-name {
font-size: 20px;
font-weight: bold;
white-space: nowrap;
}
@media (max-width: 768px) {
.company-name {
font-size: 18px;
}
}
@media (max-width: 330px) {
.company-name {
font-size: 16px;
}
}
/* ナビゲーション */
.main-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 20px;
}
.main-nav a {
min-height: 44px;
display: flex;
align-items: center;
padding: 10px 0;
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.main-nav a:hover {
color: #ffd700;
}
/* ハンバーガーボタン初期状態（非表示） */
.hamburger {
display: none;
width: 30px;
height: 24px;
position: relative;
cursor: pointer;
}
.hamburger span {
position: absolute;
width: 100%;
height: 3px;
background-color: #fff;
transition: 0.3s;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 10px;
}
.hamburger span:nth-child(3) {
top: 20px;
}
@media (max-width: 864px) {
/* メニューは非表示にする */
.main-nav {
position: fixed;
top: 70px;
right: 0;
width: 260px;
background-color: #003366;
padding: 20px;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.main-nav ul {
flex-direction: column;
gap: 0;
}
/* スマホタップ */
.main-nav a:active {
opacity: 0.6;
}
.main-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.main-nav li:last-child {
border-bottom: none;
}
.main-nav li a {
position: relative; /* 絶対位置アイコンをa内に */
padding-left: 40px; /* アイコン分スペース */
display: block; /* 横並び */
font-size: 18px;
}
/* ホームアイコン */
.main-nav li .home-menu-icon {
content: "";
position: absolute; /* a内で絶対位置 */
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* サービスアイコン */
.main-nav li .toolbox-menu-icon {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* ビルアイコン */
.main-nav li .building-menu-icon {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* はてなアイコン */
.main-nav li .question-menu-icon {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* メールアイコン */
.main-nav li .mail-menu-icon {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* ハンバーガーを表示 */
.hamburger {
display: flex;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 10px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
/* メニューを開いたとき */
.main-nav.active {
transform: translateX(0);
}
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: 0.3s;
z-index: 998;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* =====================
ホーム
===================== */
/* ヒーローセクション */
.hero {
position: relative;
margin-top: 70px;
overflow: hidden;
background-color: #001a33; /* ロゴに合う濃い色 */
background-image: url("../images/background.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 100px 20px;
color: white;
text-align: center;
opacity: 0; /* 初期は透明 */
transition: opacity 1.5s ease;
}
/* 表示後 */
.hero.show {
opacity: 1;
}
/* 黒い半透明レイヤー */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
/* 文字を前面に */
.hero > * {
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 2em;
margin-bottom: 10px;
}
.hero p {
font-size: 1em;
}
.hero-header {
display: flex;
justify-content: center; /* 中央揃え */
align-items: center; /* 縦中央揃え */
gap: 15px; /* ロゴと文字の間隔 */
margin-bottom: 20px;
white-space: nowrap;
}
.hero-logo {
opacity: 0;
transform: translateY(-10px); /* 軽く上からフェードイン */
transition:
opacity 1s ease,
transform 1s ease;
}
.hero-logo.show {
opacity: 1;
transform: translateY(0);
}
.hero-company-name {
color: white;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
opacity: 0;
transition:
opacity 1s ease,
transform 1s ease;
}
.hero-company-name.show {
opacity: 1;
transform: translateY(0);
}
.hero-text {
opacity: 0;
transform: translateX(30px); /* 右からスタート */
transition:
opacity 1s ease,
transform 1s ease;
}
.hero-text.show {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 820px) {
.hero h1.hero-company-name {
font-size: 20px;
}
.hero-logo {
width: 60px;
}
.hero h2 {
font-size: 16px;
}
.hero p {
font-size: 14px;
}
}
@media (max-width: 360px) {
.hero h2 {
font-size: 15px;
}
}
/* ニュースセクション */
.news {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* =====================
サービス
===================== */
/* ページ全体のラッパー */
.page-wrapper {
width: 100%;
max-width: 1200px; /* PC最大幅 */
margin: 0 auto; /* 中央寄せ */
padding: 70px 15px 0;
}
#services h1 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
font-weight: bold;
color: #003366;
}
/* サービスカード */
.services-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.service-card {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 100%;
max-width: 320px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
border: 2px solid transparent; /* 枠は透明で初期化。activeになったときにborderが追加されても、カードサイズが変わらず上下にズレないようにする */
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border 0.2s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/*
スワイプ（タッチ操作）でもカードを浮かせるため
active状態にもhover時と同じtransformを適用
*/
.service-card.active {
border: 2px solid #004080;
background-color: #f0f8ff;
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.service-row {
display: flex;
align-items: center;
gap: 14px;
}
.service-row h3 {
white-space: nowrap;
}
.service-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center; /* 縦中央 */
justify-content: center; /* 横中央 */
}
.service-icon svg {
width: 100%;
height: 100%;
display: block; /* 余計な隙間防止 */
fill: #003366;
}
.service-card h3 {
margin: 0;
font-size: 18px;
}
@media (max-width: 430px) {
.service-card {
max-width: none;
}
}
#details-wrapper {
position: relative;
width: 100%;
max-width: 1000px;
min-height: 100px;
overflow: hidden;
margin: 20px auto;
border-radius: 8px;
background-color: #e6f0ff;
}
@media (max-width: 768px) {
#details-wrapper {
min-height: 200px;
}
}
.service-detail {
position: absolute;
width: 100%;
top: 50%;
left: 0;
text-align: center;
/* 最初は右外に置いておく */
transform: translateY(-50%) translateX(100%);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
.service-detail {
text-align: left;
}
}
.service-detail.active {
transform: translateY(-50%) translateX(0);
z-index: 2;
}
/* 次へ移動（左へ消える） */
.service-detail.exit-left {
transform: translateY(-50%) translateX(-100%);
z-index: 1;
}
/* 前へ移動（右へ消える） */
.service-detail.exit-right {
transform: translateY(-50%) translateX(100%);
z-index: 1;
}
/* 左から入るための初期位置 */
.service-detail.enter-left {
transform: translateY(-50%) translateX(-100%);
}
/* 右から入るための初期位置 */
.service-detail.enter-right {
transform: translateY(-50%) translateX(100%);
}
.service-detail p {
padding: 10px;
font-size: 16px;
line-height: 1.8;
font-weight: bold;
}
@media (max-width: 330px) {
.service-detail p {
font-size: 14px;
}
}
.indicator-container {
text-align: center;
margin-top: 10px;
}
.indicator {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
.indicator.active {
background-color: #004080;
}
/* 検証範囲テーブル */
.verification-range {
margin-top: 60px;
}
.verification-range h3 {
text-align: center;
font-size: 24px;
color: #003366;
margin-bottom: 10px;
}
.verification-range .note {
text-align: center;
margin-bottom: 20px;
color: #555;
}
.table-wrapper {
width: 100%;
margin: 30px auto; /* 中央寄せ */
overflow-x: auto; /* スマホ対応 */
}
.range-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.range-table th,
.range-table td {
border: 1px solid #ddd;
padding: 10px;
font-size: 14px;
}
.range-table th {
background: #003366;
color: white;
text-align: center;
}
.range-table td {
vertical-align: middle;
}
.range-table tr:nth-child(even) {
background: #f7f9fc;
}
/* =====================
会社情報
===================== */
#about {
max-width: 900px;
margin: 110px auto 40px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#about h1 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
/* =====================
よくあるご質問
===================== */
.faq-page {
max-width: 900px;
margin: 0 auto;
padding: 70px 20px 40px;
}
.faq-page h1 {
text-align: center;
font-size: 28px;
margin-bottom: 40px;
color: #003366;
}
.faq-item {
margin-bottom: 30px;
padding: 20px;
border-left: 4px solid #003366;
background: #f8f9fb;
border-radius: 6px;
}
.faq-item h2 {
font-size: 18px;
margin-bottom: 10px;
color: #003366;
}
.faq-item p {
line-height: 1.7;
}
/* =====================
お問い合わせ・ご依頼
===================== */
#contact {
max-width: 900px;
margin: 110px auto 40px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#contact h1 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
.contact-btn {
display: inline-block;
padding: 10px 20px;
background-color: #003366;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.contact-btn:hover {
background-color: #0055aa;
}
/* =====================
プライバシーポリシー
===================== */
#privacy {
max-width: 900px;
margin: 110px auto 40px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#privacy h1 {
font-size: 28px;
margin-bottom: 20px;
color: #333;
}
#privacy h2 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
color: #003366;
border-left: 4px solid #003366;
padding-left: 10px;
}
/* フッター */
footer {
background-color: #004080;
color: white;
text-align: center;
padding: 15px 10px;
font-size: 0.9em;
margin-top: 40px;
}
footer a {
color: white;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.4);
transition: 0.3s;
}
footer a:hover {
color: #ffd700;
text-decoration-color: #ffd700;
}