/*
* destyle.css はHTMLので最初に読み込む必要があります。
* 例:
*/
/* ====================
グローバルスタイル
==================== */
body {
/* Google Fontsで読み込んだフォントを優先し、サイト全体に適用 */
/* HTMLでRobotoとZen Kaku Gothic Newを読み込んでいるので、こちらを主にする */
font-family: 'Zen Kaku Gothic New', 'Roboto', sans-serif;
color: #333; /* デフォルトの文字色を濃いグレーに (白い背景セクション用) */
background-color: white; /* サイト全体の背景は白 */
line-height: 1.6; /* 全体の行間を読みやすく設定 */
}
/* リンクのデフォルトスタイル */
a {
color: inherit; /* 親要素から色を継承 */
text-decoration: none; /* 下線を削除 */
}
/* コンテナ共通スタイル */
/* 各セクションで共通して使う最大幅と中央寄せのコンテナ */
.container {
max-width: 1080px; /* 主要コンテンツの最大幅 */
width: 90%; /* 画面幅がmax-widthより小さい場合は90%を使用 */
margin: 0 auto; /* 中央寄せ */
}
/* ====================
ヘッダー
==================== */
header{
font-weight: 700;
position: absolute;
width: 100%;
z-index: 11;
color: white;
}
header .container{
max-width: 1080px;
width: 90%;
margin: 0 auto;
}
header .row {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.logo-image{
width: 36px;
height: auto;
/* vertical-align: middle; を削除 */
margin-right: 8px;
}
header .logo{
font-size: 24px;
text-shadow: 2px 2px 3px rgb(50, 50, 50),
-2px 2px 3px rgb(50, 50, 50),
2px -2px 3px rgb(50, 50, 50),
-2px -2px 3px rgb(50, 50, 50);
display: flex; /* 追加: Flexboxを使用 */
align-items: center; /* 追加: 垂直方向中央揃え */
}
header ul {
display: flex;
}
header ul li{
margin-left: 30px;
font-size: 14px;
letter-spacing: 1px;
text-shadow: 2px 2px 3px rgb(50, 50, 50),
-2px 2px 3px rgb(50, 50, 50),
2px -2px 3px rgb(50, 50, 50),
-2px -2px 3px rgb(50, 50, 50);
}
header ul li a:hover {
color: rgba(255, 255, 255, 0.7); /* ホバーで少し透明に */
}
/* ====================
セクション1 (ヒーローセクション)
==================== */
.section1 {
display: flex;
align-items: center; /* コンテナを垂直中央に配置 */
background-color: black;
min-height: 100vh; /* 画面全体を使うよう設定 */
position: relative; /* 子要素のabsolute基準 */
overflow: hidden; /* スライダー画像のはみ出しを隠す */
}
.section1 .container {
width: 90%;
max-width: 1080px;
margin: 0 auto;
text-align: center;
z-index: 11; /* テキストを画像の上に表示 */
position: relative; /* z-indexを有効にするため */
color: white; /* section1内のテキスト色を白に統一 */
}
.section1 .title {
font-size: 20px;
font-weight: 700;
margin-top: 50px;
margin-bottom: 20px;
color: rgb(206, 199, 157);
text-shadow: 2px 2px 3px rgb(50, 50, 50),
-2px 2px 3px rgb(50, 50, 50),
2px -2px 3px rgb(50, 50, 50),
-2px -2px 3px rgb(50, 50, 50);
text-decoration-line: underline;
}
.section1 h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 3px rgb(50, 50, 50),
-2px 2px 3px rgb(50, 50, 50),
2px -2px 3px rgb(50, 50, 50),
-2px -2px 3px rgb(50, 50, 50);
line-height: 1.3;
}
.section1 p {
font-size: 12px;
font-style: italic;
font-weight: 700;
margin-bottom: 80px;
text-shadow: 2px 2px 3px rgb(50, 50, 50),
-2px 2px 3px rgb(50, 50, 50),
2px -2px 3px rgb(50, 50, 50),
-2px -2px 3px rgb(50, 50, 50);
line-height: 1;
}
/* ヒーローセクションのContactボタン */
.section1 .contact-button {
display: inline-block;
padding: 15px 40px;
border: 2px solid #4CAF50; /* 枠線は濃い緑 */
color: white;
text-decoration: none;
font-size: 16px;
font-weight: 700;
letter-spacing: 1.5px;
background-color: rgba(0, 100, 0, 0.6); /* 非ホバー時は濃い緑の半透明 (0.6) */
backdrop-filter: blur(3px); /* 背景の画像をぼかす */
-webkit-backdrop-filter: blur(3px);
border-radius: 5px;
transition: all 0.3s ease; /* ホバー時のアニメーション */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 文字の影 */
box-shadow: none; /* 初期は影なし */
}
.section1 .contact-button:hover {
background-color: rgba(15, 124, 78, 0.2); /* ホバー時は薄い緑の半透明 (0.2) */
border-color: #4CAF50; /* ホバー時も枠線は同じ濃い緑を維持 */
transform: translateY(-3px); /* わずかに上に浮き上がる */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 影を加えて立体感を出す */
cursor: pointer; /* ポインター表示 */
}
/* スライダーボックス */
/* .section1 .slideBox から .slideBox に変更し、HTMLの変更（画像がslideBoxの子要素になった）に合わせる */
.slideBox {
height: 100vh;
width: 100%; /* 幅も100%に */
position: absolute; /* 親要素の.section1に合わせる */
left: 0;
top: 0;
z-index: 1; /* テキストの下に表示 */
overflow: hidden;
}
/* スライダー画像 */
.item1 {
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 画像がコンテナを覆うように調整 */
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 60s 0s infinite;
animation: anime 60s 0s infinite;
}
.item1:nth-of-type(2) { -webkit-animation-delay: 10s; animation-delay: 10s; }
.item1:nth-of-type(3) { -webkit-animation-delay: 20s; animation-delay: 20s; }
.item1:nth-of-type(4) { -webkit-animation-delay: 30s; animation-delay: 30s; }
.item1:nth-of-type(5) { -webkit-animation-delay: 40s; animation-delay: 40s; }
.item1:nth-of-type(6) { -webkit-animation-delay: 50s; animation-delay: 50s; }
/* ふわっとアニメーション */
@keyframes anime {
0% { opacity: 0; }
6% { opacity: 1; }
12% { opacity: 1; }
20% { opacity: 0; z-index: 9; }
100% { opacity: 0; }
}
@-webkit-keyframes anime {
0% { opacity: 0; }
6% { opacity: 1; }
12% { opacity: 1; }
20% { opacity: 0; z-index: 9; }
100% { opacity: 0; }
}
/* ====================
message-section (廣田美術印刷所について) - おしゃれなデザイン版
==================== */
.message-section {
background-color: #f9f9f9; /* セクション全体の背景色 */
color: #333; /* デフォルトの文字色 */
text-align: center;
padding: 80px 0; /* 上下のパディングを広げてゆとりを持たせる */
position: relative;
}
.message-section .container {
/* 変更点: コンテナの最大幅を800pxに調整し、左右に適切な余白を確保 */
max-width: 1000px; /* ここを調整することで、横幅を制御 */
margin: 0 auto; /* 中央寄せ */
padding: 40px 50px; /* 上下のパディングは維持、左右のパディングを増やして余白を強調 */
background-color: white; /* コンテナ自体の背景色 */
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
z-index: 2;
}
.main-message { /* HTMLがh2になったので、セレクタ名と合わせる */
text-align: center;
font-size: 32px;
font-weight: 700;
color: #222; /* 濃いグレー */
margin-bottom: 2rem;
border-bottom: 3px solid #0F7C4E; /* 緑色の太い下線 */
display: inline-block; /* 下線を要素の幅に合わせる */
padding-bottom: 0.8rem; /* 下線とテキストの間隔 */
letter-spacing: 1px;
}
.message-body {
font-size: 17px;
line-height: 2;
margin-top: 2rem;
text-align: justify; /* 両端揃えを維持。必要であれば left に戻す */
font-weight: 400;
color: #444; /* やや薄めの文字色 */
}
/* ====================
セクション2 (事業内容)
==================== */
.section2 {
color: #333;
padding: 80px 0; /* padding: auto; を修正し、適切な値に変更 */
background-color: white; /* 背景色 */
}
.section2 .container {
width: 90%;
margin: 0 auto;
max-width: 1280px;
text-align: center;
}
.section2 h2 {
font-size: 28px; /* main-messageの見出しサイズと合わせる */
font-weight: 700;
margin-bottom: 60px;
color: #333;
border-bottom: 2px solid #0F7C4E; /* 緑色の下線 */
display: inline-block;
padding-bottom: 0.5rem;
letter-spacing: 0.5px;
}
.section2 .row {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* 折り返しを許可 */
gap: 2%; /* カラム間の隙間 */
}
.section2 .col {
width: 23.5%; /* 4カラムで均等に配置するための調整 (合計94% + 3*2% = 100%) */
margin-bottom: 30px; /* 下方向のマージン */
text-align: center; /* 中のテキストを中央寄せ */
}
.section2 .col img {
max-width: 100%;
height: auto;
margin-bottom: 15px; /* 画像とテキストの間隔 */
border-radius: 5px; /* 画像に軽い角丸 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 画像に影 */
}
.section2 h3 {
margin-bottom: 20px;
font-weight: 700;
color: #333;
font-size: 18px;
}
.section2 h4 {
margin-bottom: 15px; /* h4の下マージンを調整 */
font-size: 14px;
color: #666;
text-align: left;
}
/* ====================
Company Profile Section (会社概要)
==================== */
/* ====================
Company Profile Section (会社概要)
==================== */
.company-profile-section {
background-color: #f8f8f8; /* セクション全体の背景色 */
padding: 80px 0;
color: #333;
text-align: center;
}
.company-profile-section .container {
max-width: 1080px;
width: 90%;
margin: 0 auto;
}
.company-profile-header {
margin-bottom: 20px;
}
.company-profile-logo-wave {
width: 60px;
height: auto;
display: block;
margin: 0 auto 5px;
}
.profile-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: #333;
letter-spacing: 2px;
border-bottom: 2px solid #0F7C4E; /* 緑色の下線 */
display: inline-block;
padding-bottom: 0.5rem;
letter-spacing: 0.5px;
}
.profile-table-wrapper {
background-color: transparent; /* 背景色を透明にするか、セクションの背景色に合わせる */
border: none; /* 外枠の罫線を削除 */
border-radius: 0; /* 角丸も削除 */
overflow: hidden;
box-shadow: none; /* 影も削除 */
text-align: left;
}
.profile-table-wrapper table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* 各行のスタイル */
.profile-table-wrapper tr {
/* ここで行間の視覚的な区切りを設定 */
border-bottom: 1px solid #e0e0e0; /* 薄い下線を残す（完全に消したい場合は none） */
}
.profile-table-wrapper tr:last-child {
border-bottom: none; /* 最後の行の下線は削除 */
}
.profile-table-wrapper th,
.profile-table-wrapper td {
padding: 15px 20px;
border-bottom: none; /* 個別の罫線を削除 */
vertical-align: top;
height: auto;
}
.profile-table-wrapper th.table-label {
width: 25%;
background-color: transparent; /* 背景色を透明に */
font-weight: 500;
color: #666;
white-space: nowrap;
box-sizing: border-box;
}
.profile-table-wrapper td.table-value {
color: #333;
line-height: 1.6;
width: 75%;
box-sizing: border-box;
}
.profile-table-wrapper td span {
display: block;
font-size: 0.9em;
color: #888;
}
.profile-table-wrapper td ul {
list-style: none;
padding: 0;
margin: 0;
}
.profile-table-wrapper td ul li {
margin-bottom: 5px;
position: relative;
padding-left: 1.2em;
}
.profile-table-wrapper td ul li:before {
content: '•';
color: #0F7C4E;
font-size: 1.2em;
position: absolute;
left: 0;
top: 0;
}
.profile-table-wrapper td ul li:last-child {
margin-bottom: 0;
}
.profile-table-wrapper td a {
color: #0F7C4E;
text-decoration: none;
}
.profile-table-wrapper td a:hover {
text-decoration: underline;
}
/* レスポンシブ対応の変更も同様に適用 */
@media (max-width: 768px) {
/* 既存のレスポンシブスタイルは維持しつつ、罫線関連を調整 */
.profile-table-wrapper th,
.profile-table-wrapper td {
padding: 12px 15px;
display: block;
width: 100%;
box-sizing: border-box;
border-bottom: none; /* ここでも個別のボーダーを削除 */
}
.profile-table-wrapper th {
background-color: transparent; /* 背景色を透明に */
border-bottom: none; /* 罫線削除 */
padding-bottom: 5px;
}
.profile-table-wrapper tr {
border-bottom: 1px solid #e0e0e0; /* レスポンシブ時も行間に薄い下線を維持 */
margin-bottom: 10px;
display: block;
}
.profile-table-wrapper tr:last-child {
border-bottom: none;
}
.profile-table-wrapper th + td {
border-top: none;
padding-top: 5px;
}
/* ...その他のレスポンシブスタイルは既存のまま */
}
/* ====================
Contact Section (お問い合わせ)
==================== */
.contact-section {
padding: 10px 0;
background-color: #f9f9f9;
color: #333;
}
.contact-section .container {
max-width: 1280px;
width: 90%;
margin: 0 auto;
}
.contact-box {
border: 1px solid #CFC5BB;
padding: 40px 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.contact-left {
text-align: center;
padding-right: 40px;
}
.contact-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
color: #333;
}
.contact-message {
font-size: 16px;
line-height: 1.6;
color: #555;
}
.contact-divider {
width: 1px;
height: 120px;
background-color: #CFC5BB;
margin: 0 40px;
}
.contact-right {
text-align: center;
padding-left: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-phone-fax-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.phone-fax-numbers-wrapper {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 25px;
}
.phone-group {
/* 必要に応じて個別の調整 */
}
.phone-number {
font-size: 36px;
font-weight: 700;
color: #333;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.fax-group {
/* 必要に応じて個別の調整 */
}
.fax-number {
font-size: 36px; /* FAX番号のフォントサイズは電話番号と揃えるか、調整 */
font-weight: 700;
color: #333/* FAX番号の色は電話番号より薄めに */
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.contact-icon {
width: 28px;
height: auto;
vertical-align: middle;
}
.email-button {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #0F7C4E;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: 500;
transition: background-color 0.3s ease;
}
.email-button:hover {
background-color: #0c643f;
}
/* ====================
Footer
==================== */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 14px;
margin-top: 100px; /* 他のセクションとの間隔 */
}
footer .container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
.copyright {
margin: 0;
line-height: 1.5;
}
/* ====================
レスポンシブ対応
==================== */
@media (max-width: 992px) {
/* 992px以下での調整例 */
.section2 .col {
width: 48%; /* 2カラム表示に */
}
}
@media (max-width: 768px) {
/* ヘッダーの調整 */
header .row {
flex-direction: column;
height: auto;
padding: 15px 0;
}
header .logo {
margin-bottom: 10px;
}
header ul {
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
header ul li {
margin: 0 10px 5px;
}
/* セクション1 (ヒーローセクション) */
.section1 h1 {
font-size: 36px;
}
.section1 p {
font-size: 10px;
}
.section1 .contact-button {
padding: 12px 30px;
font-size: 14px;
}
/* message-section */
.message-section {
padding: 50px 0; /* 上下のパディングを調整 */
}
.message-section .container {
max-width: none; /* スマホでは最大幅を解除し、左右のパディングで調整 */
padding: 30px 20px; /* 左右のパディングを減らす */
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.main-message {
font-size: 26px;
padding-bottom: 0.6rem;
}
.message-body {
font-size: 16px;
line-height: 1.8;
text-align: left; /* スマホでは両端揃えより左揃えが読みやすい場合がある */
}
/* セクション2 */
.section2 h2 {
font-size: 24px;
}
.section2 .row {
flex-direction: column; /* 1カラムに */
gap: 0; /* gapをリセット */
}
.section2 .col {
width: 100%;
margin-bottom: 40px;
}
/* Company Profile Section */
.company-profile-header {
margin-bottom: 40px;
}
.profile-title {
font-size: 28px;
}
.profile-subtitle {
font-size: 16px;
}
.profile-table-wrapper th,
.profile-table-wrapper td {
padding: 12px 15px;
display: block;
width: 100%;
box-sizing: border-box;
border-bottom: none;
}
.profile-table-wrapper th {
background-color: #f0f0f0;
text-align: left;
font-weight: 700;
}
.profile-table-wrapper tr {
border-bottom: 1px solid #e9e9e9;
margin-bottom: 10px;
display: block;
}
.profile-table-wrapper tr:last-child {
border-bottom: none;
}
.profile-table-wrapper th + td {
border-top: 1px solid #e9e9e9;
padding-top: 10px;
}
.profile-table-wrapper td span {
margin-top: 5px;
}
.profile-table-wrapper table {
table-layout: auto;
}
.profile-table-wrapper th.table-label,
.profile-table-wrapper td.table-value {
width: auto;
}
/* Contact Section */
.contact-box {
flex-direction: column;
padding: 30px 20px;
}
.contact-left,
.contact-right {
padding: 0;
width: 100%;
}
.contact-divider {
width: 80%;
height: 1px;
margin: 30px 0;
}
.contact-left {
margin-bottom: 30px;
}
.phone-fax-numbers-wrapper {
flex-direction: column;
gap: 10px;
align-items: center;
}
.phone-number {
font-size: 30px;
}
.fax-number {
font-size:30px
}
.email-button {
padding: 12px 20px;
font-size: 14px;
}
/* Footer */
footer {
padding: 15px 0;
font-size: 12px;
}
}
@media (max-width: 480px) {
/* さらに小さなスマホ画面での調整例 */
.section1 h1 {
font-size: 30px;
}
.contact-phone-fax-title {
font-size: 12px;
}
.phone-number, .fax-number {
font-size: 24px;
}
}