/*
Theme Name: Takaoka Original Theme
Description: 高岡陶器オリジナルテーマ
Version: 1.0
*/
/* 1. 基本設定 */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; color: #333; padding-top: 80px; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul { list-style: none; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
/* 2. ヘッダー */
#site-header { width: 100%; height: 80px; background-color: #FFFFFF; position: fixed; top: 0; left: 0; z-index: 999; display: flex; justify-content: center; align-items: center; padding: 0 2%; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.site-logo { position: absolute; left: 2%; top: 50%; transform: translateY(-50%); z-index: 1000; }
.site-logo a { font-size: 1.6rem; font-weight: bold; color: #333; letter-spacing: 0.1em; white-space: nowrap; }
.main-nav { width: 100%; max-width: 960px; margin: 0 auto; }
.main-nav ul { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 20px; }
.main-nav li { white-space: nowrap; }
.main-nav a { font-size: 0.95rem; color: #333; padding: 10px 0; font-weight: 500; display: block; }
.main-nav a:hover { color: #5A7B91; }
/* 3. メインビジュアル（トップページ） */
#main-visual { width: 100%; height: 600px; background-color: #333; background-image: url('https://takaoka758.com/wp-content/uploads/2025/12/トップページ画像.jpg'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; position: relative; }
#main-visual::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
.visual-content-inner { position: relative; z-index: 2; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; font-family: "Yu Mincho", serif; color: #FFF; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.visual-main-text { font-size: 2.8rem; font-weight: bold; margin: 0; letter-spacing: 0.1em; line-height: 1.8; }
.visual-main-text .line-1 { display: block; }
.visual-main-text .line-2 { display: block; margin-top: 2em; }
.visual-sub-text { font-size: 1.2rem; letter-spacing: 0.3em; margin: 0 0 0 20px; opacity: 0.9; }
/* 4. セクション共通 */
.section-padding { padding: 60px 5%; text-align: center; }
h2 { font-size: 2rem; font-weight: bold; margin-bottom: 40px; padding-bottom: 10px; position: relative; display: inline-block; color: #333; }
h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 2px; background-color: #333; }
/* 5. トップページコンテンツ */
#concept { background-color: #F7F7F7; }
.concept-text { max-width: 800px; margin: 0 auto; line-height: 1.8; text-align: left; }
/* トップページ：髙岡陶器とは（重ね画像デザイン） */
.top-about-images { position: relative; width: 100%; max-width: 800px; height: 450px; margin: 0 auto 60px; }
.top-about-images figure { margin: 0; position: absolute; border: 10px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
.top-about-images img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }
.top-img-main { width: 60%; height: 350px; top: 0; left: 10%; z-index: 1; }
.top-img-sub { width: 45%; height: 280px; bottom: 0; right: 10%; z-index: 2; }
.company-text { max-width: 800px; margin: 0 auto 40px; line-height: 1.8; text-align: left; }
.btn-readmore a { display: inline-block; padding: 12px 40px; border-radius: 30px; background-color: #5A7B91; color: #fff; font-weight: bold; transition: 0.3s; }
.btn-readmore a:hover { background-color: #333; }
#products { background-color: #F7F7F7; }
.product-row { display: flex; justify-content: center; gap: 30px; max-width: 1000px; margin: 0 auto 40px; }
.product-col { width: 30%; text-align: center; }
.product-img { border: 1px solid #eee; background: #fff; transition: 0.3s; }
.product-col a:hover .product-img { opacity: 0.8; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-caption { margin-top: 10px; font-weight: bold; }
#news { padding-bottom: 60px; }
.news-list-container { max-width: 800px; margin: 0 auto; text-align: left; background: #fff; padding: 20px; border: 1px solid #eee; }
.news-list li { display: flex; border-bottom: 1px solid #eee; padding: 10px 0; }
.news-list .date { width: 120px; font-weight: bold; color: #555; }
.news-all-link { text-align: right; font-size: 0.9rem; }
/* 6. CTA（青背景）修正版 */
/* ★重要：h2やpの黒色設定に負けないよう !important を付与 */
#common-cta-blue { background-color: #455A64; color: #FFF !important; padding: 80px 5%; text-align: center; margin-top: 60px; }
.cta-blue-inner { max-width: 1000px; margin: 0 auto; }
.cta-blue-title { font-family: "Yu Mincho", serif; font-size: 2.2rem; margin-bottom: 30px; font-weight: 500; letter-spacing: 0.1em; color: #FFF !important; }
.cta-blue-text { font-size: 1rem; line-height: 2; margin-bottom: 50px; opacity: 0.9; color: #FFF !important; }
.cta-blue-buttons { display: flex; justify-content: center; gap: 30px; }
.btn-blue-cta { display: flex; justify-content: center; align-items: center; background-color: #FFF; color: #455A64; width: 320px; height: 70px; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; transition: 0.3s; }
.btn-blue-cta:hover { opacity: 0.8; background-color: #f0f0f0; }
/* 7. フッター */
#site-footer { width: 100%; margin-top: auto; }
.footer-content { background-color: #FFF; color: #333; padding: 60px 0; }
.footer-inner { max-width: 1000px; margin: 0 auto; padding: 0 5%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.footer-info { text-align: center; }
.footer-logo { font-size: 1.8rem; margin-bottom: 20px; font-family: "Yu Mincho", serif; letter-spacing: 0.1em; font-weight: bold; }
#site-footer address { font-style: normal; line-height: 2; font-size: 0.95rem; }
.tel { display: inline-block; margin-right: 10px; font-weight: bold; }
.footer-nav ul { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.footer-nav a { color: #333; font-size: 0.9rem; font-weight: 500; }
.footer-nav a:hover { color: #5A7B91; }
.copyright { background-color: #3C596B; color: #FFF; text-align: center; padding: 15px 0; font-size: 0.75rem; letter-spacing: 0.05em; }
/* 8. 下層ページ専用 */
#sub-visual, #main-visual { position: relative; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; }
.visual-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1; }
.breadcrumb { max-width: 1000px; margin: 20px auto 0; padding: 0 5%; font-size: 0.85rem; color: #666; }
.page-container { max-width: 1000px; margin: 0 auto; text-align: left; min-height: 400px; }
.page-container img { max-width: 1000px; height: auto; }
/* 9. 高岡陶器について（About）専用 */
/* ごあいさつ（全画面背景） */
.about-section:first-of-type { background-color: #F7F7F7; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 80px 0; margin-top: -60px; margin-bottom: 60px; text-align: center; }
.about-section:first-of-type h3 { font-size: 2rem; font-weight: bold; margin-bottom: 40px; font-family: "Helvetica Neue", Arial, sans-serif; position: relative; display: inline-block; border: none; padding: 0; }
.about-section:first-of-type h3::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; width: 60px; height: 2px; background-color: #333; }
.greeting-text { max-width: 800px; margin: 0 auto 50px; line-height: 2.2; text-align: center; font-size: 1rem; padding: 0 20px; }
.greeting-images-overlap { position: relative; width: 100%; max-width: 800px; height: 450px; margin: 40px auto 0; }
.greeting-images-overlap figure { margin: 0; position: absolute; border: 10px solid #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; }
.greeting-images-overlap img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }
.greet-img-main { width: 65%; height: 380px; top: 0; left: 5%; z-index: 1; }
.greet-img-sub { width: 45%; height: 280px; bottom: 0; right: 5%; z-index: 2; }
/* 選ばれる理由（REASON） */
.about-section.reason-section { text-align: center; margin-bottom: 80px; }
.about-section.reason-section h3 { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; font-size: 2rem; color: #333; display: inline-block; position: relative; border: none; padding: 0; margin-bottom: 40px; padding-bottom: 10px; }
.about-section.reason-section h3::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 2px; background-color: #333; }
.reason-block { max-width: 860px; margin: 0 auto 100px; text-align: center; padding-bottom: 60px; border-bottom: 1px solid #ddd; counter-increment: reason-count; }
.reason-block:last-child { border-bottom: none; margin-bottom: 0; }
.reason-sub-title::before { content: "REASON " counter(reason-count, decimal-leading-zero); display: block; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 0.9rem; color: #8c7b6c; letter-spacing: 0.2em; margin-bottom: 10px; }
.reason-sub-title { font-family: "Yu Mincho", serif; font-size: 1.6rem; font-weight: 500; color: #222; margin-bottom: 40px; line-height: 1.4; }
.reason-img { margin-bottom: 40px; position: relative; display: inline-block; }
.reason-img img { width: 100%; max-width: 600px; border: 10px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.reason-block .company-text { text-align: justify; display: inline-block; max-width: 600px; font-size: 1rem; line-height: 2.2; color: #444; }
/* 会社概要・ショールーム（シンプル再現版） */
.company-simple-section { max-width: 800px; margin: 0 auto 100px; }
.simple-block { text-align: center; margin-bottom: 80px; }
.president-photo { position: relative; display: inline-block; margin-bottom: 30px; width: 100%; max-width: 600px; }
.president-photo img { width: 100%; height: auto; border-radius: 12px; }
.photo-label { position: absolute; bottom: 0; left: 0; background: #455A64; color: #fff; font-size: 0.8rem; padding: 5px 15px; border-top-right-radius: 8px; border-bottom-left-radius: 12px; letter-spacing: 0.1em; }
.president-text { text-align: left; font-size: 0.95rem; line-height: 2; margin-bottom: 40px; font-family: "Yu Mincho", serif; }
.simple-company-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border: 1px solid #ddd; }
.simple-company-table th, .simple-company-table td { border: 1px solid #ddd; padding: 15px; text-align: left; }
.simple-company-table th { background-color: #f9f9f9; width: 30%; font-weight: normal; color: #555; }
.showroom-simple-block { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; }
.showroom-heading-left { font-size: 1.5rem; font-weight: bold; text-align: left; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 10px; display: inline-block; width: 100%; }
.showroom-photo img { width: 100%; height: auto; border-radius: 20px; margin-bottom: 30px; }
.showroom-text { text-align: left; line-height: 2; margin-bottom: 30px; font-size: 0.95rem; }
.showroom-btn-area { text-align: center; }
.btn-blue-simple { display: inline-block; background-color: #5A7B91; color: #fff; padding: 15px 60px; border-radius: 50px; font-size: 1.1rem; font-weight: bold; transition: 0.3s; box-shadow: 0 4px 10px rgba(90, 123, 145, 0.3); }
.btn-blue-simple:hover { opacity: 0.8; }
/* スマホ対応 */
@media (max-width: 768px) {
#site-header { height: 60px; justify-content: space-between; padding: 0 5%; }
.site-logo { position: relative; left: auto; top: auto; transform: none; }
.main-nav { display: none; }
#main-visual { height: 400px; }
.visual-main-text { font-size: 1.8rem; }
#common-cta-blue { padding: 60px 5%; }
.cta-blue-buttons { flex-direction: column; align-items: center; gap: 20px; }
.btn-blue-cta { width: 100%; max-width: 300px; height: 60px; font-size: 1.1rem; }
.footer-nav ul { flex-direction: column; gap: 15px; align-items: center; }
.greeting-text { text-align: left; }
.top-about-images, .greeting-images-overlap { height: auto; display: flex; flex-direction: column; gap: 20px; }
.top-about-images figure, .greeting-images-overlap figure { position: relative; width: 100%; height: 250px; border-width: 5px; }
.reason-img img { max-width: 100%; border-width: 5px; }
.simple-company-table th, .simple-company-table td { display: block; width: 100%; }
.simple-company-table th { background-color: #eee; font-weight: bold; }
.president-photo, .showroom-photo img { width: 100%; }
}
/* ==================================== */
/* 緊急修正：画像の横並びと文字色の補正 */
/* ==================================== */
/* 1. 高岡陶器について（Aboutページ）の画像を横並びに戻す */
.greeting-images {
display: flex;
justify-content: center;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.greeting-images img {
width: 48%; /* 2枚横並び */
height: auto;
margin-bottom: 0;
}
/* 2. トップページの3枚画像を横並びに戻す（念のため） */
.image-row {
display: flex;
justify-content: center;
gap: 15px;
}
.image-row .col {
width: 32%; /* 3枚横並び */
}
/* 3. 「せとものをお値打ちに」の文字を白く・下線を消す */
/* 優先度を最大(!important)にして強制的に適用します */
#common-cta-blue .cta-blue-title {
color: #FFFFFF !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
#common-cta-blue .cta-blue-text {
color: #FFFFFF !important;
}
/* スマホでは縦並びにする */
@media (max-width: 768px) {
.greeting-images,
.image-row {
flex-direction: column;
}
.greeting-images img,
.image-row .col {
width: 100%;
margin-bottom: 20px;
}
}
/* ==================================== */
/* 画像サイズ強制修正（小さく戻す） */
/* ==================================== */
/* 1. 高岡陶器について（Aboutページ）の2枚画像 */
.greeting-images {
max-width: 800px !important; /* コンテナの幅を800pxに制限 */
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
gap: 20px !important;
}
.greeting-images img {
/* 幅を強制的に小さくする */
width: 45% !important; /* 親枠の半分弱 */
max-width: 360px !important; /* ピクセルでも上限を設定 */
height: auto !important;
}
/* 2. トップページの3枚画像 */
.image-row {
max-width: 1000px !important;
margin: 0 auto 40px !important;
display: flex !important;
justify-content: center !important;
gap: 15px !important;
}
.image-row .col {
/* 幅を強制的に小さくする */
width: 30% !important; /* 親枠の3割 */
max-width: 300px !important; /* ピクセルでも上限を設定 */
}
.image-row img {
width: 100% !important;
height: auto !important;
}
/* ==================================== */
/* メインビジュアルの文字色・重なり順の強制修正 */
/* ==================================== */
/* 1. 背景カバーの重なり順を「奥（1）」に設定 */
#main-visual::before {
z-index: 1 !important;
}
/* 2. 文字が入っている箱を「手前（2）」に設定 */
.visual-content-inner {
z-index: 2 !important;
position: relative !important;
}
/* 3. 見出し（せとものを...）の色を「白」に強制 */
/* ※h2の黒色設定に勝つために詳細に指定 */
#main-visual .visual-main-text {
color: #FFFFFF !important;
text-shadow: 0 0 10px rgba(0,0,0,0.5); /* 影も念のため再定義 */
}
/* 4. サブテキスト（美濃焼と...）の色も「白」に強制 */
#main-visual .visual-sub-text {
color: #FFFFFF !important;
}
/* メインビジュアル内のh2だけ、下線を消す設定 */
#main-visual h2::after {
content: none !important; /* 線を「なし」にする */
display: none !important;
}
/* ==================================== */
/* メインビジュアルの下線を強制削除 */
/* ==================================== */
/* クラス名で直接指名して、after（擬似要素）を消す */
#main-visual .visual-main-text::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
/* 念のため、h2タグ自体に対しても線を消す指定を入れる */
#main-visual h2::after {
content: none !important;
display: none !important;
}
/* 万が一、border（枠線）で書かれていた場合の保険 */
#main-visual .visual-main-text,
#main-visual h2 {
border: none !important;
padding-bottom: 0 !important; /* 線のために空けていた隙間も消す */
}
/* CTAエリア（せとものをお値打ちに）の下線を消す */
#common-cta-blue .cta-blue-title::after {
content: none !important;
display: none !important;
}
/* 念のため、見出し自体の余白や枠線もリセット */
#common-cta-blue .cta-blue-title {
border: none !important;
padding-bottom: 0 !important;
}
/* ==================================== */
/* 会社概要：デザイン復活（グレー背景・サイズ統一） */
/* ==================================== */
/* 1. 背景色をグレーにし、画面幅いっぱいに広げる */
.company-simple-section {
background-color: #F7F7F7 !important; /* 「髙岡陶器とは」と同じグレー */
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 80px 0 !important;
margin-bottom: 0 !important;
/* 中身を中央に寄せる */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* 2. 見出し（会社概要）を「選ばれる理由」と同じデザインに */
.company-simple-section h3.about-heading {
font-family: "Yu Mincho", "YuMincho", serif !important; /* 明朝体に修正 */
font-size: 2rem !important;
font-weight: bold !important;
color: #333 !important;
display: inline-block !important;
position: relative !important;
margin-bottom: 40px !important;
border: none !important;
padding: 0 0 10px 0 !important;
}
.company-simple-section h3.about-heading::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 0 !important;
width: 60px !important;
height: 2px !important;
background-color: #333 !important;
}
/* 3. 中身のブロック（写真・文章・表）を中央幅800pxに収める */
.simple-block {
width: 100% !important;
max-width: 800px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* 4. 社長挨拶文の文字サイズ調整 */
.president-text {
font-size: 1rem !important;
line-height: 2.2 !important;
text-align: left !important;
max-width: 600px !important;
margin: 0 auto 40px !important;
}
/* 5. 会社情報の表 */
.simple-company-table {
font-size: 1rem !important;
width: 100% !important;
margin: 0 auto !important;
background-color: #fff !important; /* 表の中は白くする */
}
/* 6. ショールーム部分 */
.showroom-simple-block {
width: 100% !important;
max-width: 800px !important;
margin: 60px auto 0 !important;
padding: 40px 20px 0 !important;
border-top: 1px solid #ddd !important;
}
/* ==================================== */
/* 会社概要・ショールーム：位置ズレ完全修正 */
/* ==================================== */
/* 1. 外枠（グレー背景）を強制的に画面中央・全幅にする */
.company-simple-section {
/* 以前の calc 計算式をリセット */
margin-left: 0 !important;
margin-right: 0 !important;
/* positionテクニックで画面幅いっぱいに */
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
background-color: #F7F7F7 !important;
padding: 80px 0 !important;
margin-bottom: 0 !important;
/* 中身の配置設定 */
text-align: center !important; /* 中身のインライン要素を中央へ */
}
/* 2. 中身のブロック（会社概要・ショールーム）を中央に固定 */
.simple-block,
.showroom-simple-block {
width: 90% !important; /* スマホ対応（横幅いっぱいになりすぎない） */
max-width: 800px !important; /* PCでの最大幅 */
margin: 0 auto !important; /* ★これでブロック自体を中央揃えにする */
text-align: left !important; /* 文章自体は左読み（お好みで） */
background-color: transparent !important;
}
/* 3. 見出しの位置調整 */
.company-simple-section h3.about-heading {
text-align: center !important;
display: inline-block !important;
margin: 0 auto 40px !important;
}
/* 4. 画像と表の中央配置 */
.president-photo,
.showroom-photo img {
display: block !important;
margin: 0 auto 30px !important;
max-width: 100% !important;
height: auto !important;
}
.simple-company-table {
margin: 0 auto !important;
width: 100% !important;
background: #fff !important;
}
/* 5. ボタンエリア */
.showroom-btn-area {
text-align: center !important;
margin-top: 40px !important;
}
/* ==================================== */
/* 会社概要：背景を強制的に画面全幅へ */
/* ==================================== */
.company-simple-section {
/* 親要素の幅制限を解除 */
width: 100vw !important;
max-width: none !important;
/* 画面の左端まで強制的に引っ張る計算式 */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background-color: #F7F7F7 !important;
padding: 80px 0 !important;
/* 位置ズレ防止 */
position: relative !important;
left: auto !important;
transform: none !important;
}
/* 中身を中央に戻す */
.simple-block,
.showroom-simple-block {
width: 100% !important;
max-width: 800px !important; /* 中身は800pxに収める */
margin: 0 auto !important; /* 左右中央揃え */
padding-left: 20px !important;
padding-right: 20px !important;
}
/* ==================================== */
/* アクセスセクション */
/* ==================================== */
.access-section {
padding: 80px 0;
background-color: #FFFFFF; /* 白背景でスッキリさせる */
text-align: center;
}
/* 住所などの文字 */
.access-info {
margin-bottom: 40px;
}
.access-address {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.6;
font-family: "Yu Mincho", serif; /* 住所は明朝体で上品に */
}
.access-note {
font-size: 1rem;
color: #666;
}
/* 地図の枠（レスポンシブ対応） */
.access-map-wrapper {
width: 100%;
max-width: 800px;
height: 0;
padding-bottom: 50%; /* 地図の縦横比（2:1くらい） */
position: relative;
margin: 0 auto 30px;
border: 1px solid #ddd; /* 薄い枠線 */
}
.access-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* マップボタン */
.btn-map-link {
display: inline-block;
padding: 12px 40px;
border: 1px solid #333; /* 黒い枠線 */
color: #333;
text-decoration: none;
transition: 0.3s;
font-size: 0.9rem;
letter-spacing: 0.1em;
}
.btn-map-link:hover {
background-color: #333;
color: #fff;
}
/* スマホ対応 */
@media (max-width: 768px) {
.access-map-wrapper {
padding-bottom: 75%; /* スマホでは少し縦長に見やすく */
}
}
/* ==================================== */
/* アクセス：統一感のあるデザイン */
/* ==================================== */
.access-section {
padding-bottom: 100px;
background-color: #FFFFFF; /* 白背景 */
text-align: center;
}
/* 全体ブロック（中央揃え・幅制限） */
.access-block {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
/* 地図の枠（写真と同じ白枠・影をつける） */
.access-map-frame {
width: 100%;
height: 400px; /* 地図の高さ */
margin-bottom: 40px;
/* ▼ここがポイント：写真と同じ装飾▼ */
border: 10px solid #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
background-color: #eee;
}
/* テキストエリア */
.access-text-area {
margin-bottom: 40px;
}
/* 住所（少し大きく上品に） */
.access-address-main {
font-size: 1.2rem;
font-weight: bold;
font-family: "Yu Mincho", serif;
line-height: 1.8;
margin-bottom: 15px;
color: #333;
}
/* 注釈 */
.access-note {
font-size: 1rem;
line-height: 1.8;
color: #555;
}
/* ボタンエリア */
.access-btn-area {
text-align: center;
}
/* スマホ対応 */
@media (max-width: 768px) {
.access-map-frame {
height: 300px; /* スマホでは高さを少し抑える */
border-width: 5px; /* 枠を少し細く */
}
}
/* ==================================== */
/* アクセス：フォントサイズ修正（他セクションと統一） */
/* ==================================== */
/* 1. 見出し（アクセス）を「選ばれる理由」「会社概要」と完全に合わせる */
.access-section h3.about-heading {
font-family: "Yu Mincho", "YuMincho", serif !important; /* 明朝体に修正 */
font-size: 2rem !important; /* 2remに拡大 */
font-weight: bold !important;
text-align: center !important;
display: inline-block !important;
position: relative !important;
margin-bottom: 40px !important;
color: #333 !important;
/* デフォルトの装飾リセット */
border-left: none !important;
padding-left: 0 !important;
border-bottom: none !important;
padding-bottom: 10px !important;
}
/* 見出しの下線 */
.access-section h3.about-heading::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 0 !important;
width: 60px !important;
height: 2px !important;
background-color: #333 !important;
}
/* 2. 住所テキストのサイズ調整 */
.access-address-main {
font-size: 1.1rem !important; /* 本文より少し大きく */
line-height: 1.8 !important;
font-weight: bold !important;
}
.access-note {
font-size: 1rem !important; /* 他の本文と同じサイズ */
line-height: 1.8 !important;
}
/* 3. 地図の枠のデザイン再確認（念のため） */
.access-map-frame {
border: 10px solid #fff !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
background-color: #eee !important;
}
/* ==================================== */
/* 下層ページのタイトル：横書き強制修正 */
/* ==================================== */
/* 対象：#sub-visual の中の全てのテキスト要素 */
#sub-visual .page-title,
#sub-visual h1,
#sub-visual h2,
#sub-visual .visual-content-inner {
/* 縦書き設定を解除して横書きにする */
writing-mode: horizontal-tb !important;
-ms-writing-mode: lr-tb !important;
/* 配置を中央に戻す */
text-align: center !important;
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
/* 縦書き特有の位置ズレをリセット */
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
/* 文字の向きを正常に */
text-orientation: mixed !important;
white-space: normal !important;
}
/* ==================================== */
/* 取扱い商品（WEBカタログ）ページのデザイン */
/* ==================================== */
.products-page-section {
max-width: 1000px;
margin: 0 auto 100px;
padding: 0 20px;
}
/* --- 導入部（ONLINE CATALOG） --- */
.products-intro-box {
text-align: center;
margin-bottom: 80px;
}
.catalog-main-title {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 2rem;
color: #333;
margin-bottom: 20px;
letter-spacing: 0.1em;
}
.catalog-main-title .jp-sub {
display: block;
font-size: 1rem;
font-family: "Yu Mincho", serif;
margin-top: 10px;
color: #666;
font-weight: normal;
}
.products-desc {
line-height: 2;
font-size: 0.95rem;
}
/* --- カテゴリブロック --- */
.product-category-block {
margin-bottom: 80px;
}
.category-heading {
font-size: 1.4rem;
font-weight: bold;
border-left: 5px solid #455A64; /* 左にアクセントの線 */
padding-left: 15px;
margin-bottom: 30px;
font-family: "Yu Mincho", serif;
}
/* --- カタロググリッド（3列配置） --- */
.catalog-grid {
display: flex;
flex-wrap: wrap;
gap: 30px; /* アイテム間の隙間 */
}
.catalog-item {
width: 31%; /* 3列にするため約30% */
text-align: center;
}
.catalog-link {
display: block;
transition: opacity 0.3s, transform 0.3s;
text-decoration: none;
color: #333;
}
.catalog-link:hover {
opacity: 0.8;
transform: translateY(-5px); /* ホバーで少し浮く */
}
.catalog-link figure {
margin: 0 0 15px 0;
border: 1px solid #eee; /* 薄い枠線 */
box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 影 */
background: #fff;
overflow: hidden;
}
.catalog-link img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.catalog-name {
font-size: 0.95rem;
font-weight: bold;
margin-top: 10px;
}
/* --- お問い合わせエリア --- */
.products-contact-area {
text-align: center;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #eee;
}
.products-contact-area p {
margin-bottom: 20px;
font-size: 0.95rem;
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
.catalog-grid {
flex-direction: column; /* 縦並び */
gap: 40px;
}
.catalog-item {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
}
/* ==================================== */
/* 商品一覧ページ：プルダウン＆デザイン統一版 */
/* ==================================== */
/* 1. 全体設定 */
.products-page-section {
max-width: 1000px;
margin: 0 auto 100px;
padding: 0 20px;
text-align: center;
}
/* 2. タイトルのデザイン統一 */
/* クラス名 .about-heading がついているため、自動的に他ページと同じになります。
念のため、ここで補正を入れることも可能です */
.products-page-section .about-heading {
margin-bottom: 40px !important;
}
.products-desc-top {
margin-bottom: 50px;
line-height: 1.8;
}
/* 3. プルダウンメニューエリア */
.catalog-pulldown-menu {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 80px;
flex-wrap: wrap;
position: relative;
z-index: 100; /* メニューを開いた時に上にくるように */
}
/* ボタン共通デザイン */
.pulldown-btn,
.pulldown-summary {
display: inline-block;
padding: 12px 30px;
border: 1px solid #455A64;
color: #455A64;
background: #fff;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
list-style: none; /* summaryの三角アイコンを消す */
transition: 0.3s;
min-width: 240px;
text-align: center;
}
.pulldown-btn:hover,
.pulldown-summary:hover {
background: #455A64;
color: #fff;
}
/* summaryのデフォルト三角マーカーを消す（ブラウザ互換） */
.pulldown-summary::-webkit-details-marker { display: none; }
/* プルダウンの中身 */
.pulldown-details {
position: relative; /* 子要素の基準点 */
}
.pulldown-list {
position: absolute;
top: 105%; /* ボタンのすぐ下 */
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.pulldown-list a {
display: block;
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
font-size: 0.9rem;
color: #333;
transition: 0.2s;
}
.pulldown-list a:hover {
background: #f9f9f9;
color: #455A64;
}
.pulldown-list a:last-child {
border-bottom: none;
}
/* 4. 見出しデザイン */
.middle-heading {
font-size: 1.6rem;
font-weight: bold;
color: #333;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 2px solid #ddd;
text-align: left;
scroll-margin-top: 120px; /* ジャンプした時の位置調整 */
}
.sub-heading {
font-size: 1.2rem;
font-weight: bold;
margin: 30px 0 20px;
padding-left: 15px;
border-left: 5px solid #455A64;
text-align: left;
}
.genre-section {
scroll-margin-top: 120px; /* サブカテゴリへのジャンプ調整 */
}
/* 5. 3列グリッド（崩れ防止） */
.catalog-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: flex-start;
}
.catalog-item {
width: calc((100% - 60px) / 3); /* 3等分 */
text-align: center;
margin-bottom: 20px;
}
.catalog-link {
display: block;
transition: transform 0.3s;
color: #333;
}
.catalog-link:hover {
transform: translateY(-5px);
opacity: 0.8;
}
.catalog-link figure {
margin: 0 0 10px 0;
border: 1px solid #eee;
box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}
.catalog-name {
font-size: 0.9rem;
font-weight: bold;
}
/* スマホ対応 */
@media (max-width: 768px) {
.catalog-pulldown-menu {
flex-direction: column;
align-items: center;
}
.catalog-item {
width: calc((100% - 20px) / 2); /* スマホは2列 */
}
.catalog-grid {
gap: 20px;
}
}
/* ==================================== */
/* 商品一覧ページ：位置ズレ緊急修正 */
/* ==================================== */
/* about-section の全画面設定をこのページだけ無効化する */
.products-page-section.about-section {
width: 100% !important; /* 画面幅いっぱいを解除 */
max-width: 1000px !important; /* 最大幅を1000pxに固定 */
margin: 0 auto 100px !important; /* 左右中央揃え */
padding: 0 20px !important;
/* 位置調整リセット */
position: static !important;
transform: none !important;
left: auto !important;
background-color: transparent !important; /* 背景色なし */
}
/* タイトル（ONLINE CATALOG）は中央揃えを維持 */
.products-page-section .about-heading {
text-align: center !important;
display: inline-block !important;
width: auto !important;
margin: 0 auto 40px !important; /* 中央配置 */
border-bottom: none !important; /* 一旦リセット */
padding-bottom: 10px !important;
}
/* タイトルの下線を再定義 */
.products-page-section .about-heading::after {
content: '' !important;
display: block !important;
width: 60px !important;
height: 2px !important;
background-color: #333 !important;
margin: 0 auto !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 0 !important;
}
/* ==================================== */
/* 商品一覧：プルダウンメニューの整列修正 */
/* ==================================== */
.catalog-pulldown-menu {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 80px;
flex-wrap: wrap;
align-items: flex-start; /* ★重要：高さを上揃えにしてズレを防ぐ */
}
/* プルダウン本体（details） */
.pulldown-details {
position: relative;
width: auto;
display: inline-block;
}
/* ボタン部分（summary） */
.pulldown-summary {
display: block; /* インラインブロックからブロックに変更して安定させる */
padding: 12px 30px;
border: 1px solid #455A64;
color: #455A64;
background: #fff;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
list-style: none;
text-align: center;
min-width: 260px; /* 幅を少し広げて文字数に対応 */
transition: 0.3s;
}
.pulldown-summary:hover {
background: #455A64;
color: #fff;
}
.pulldown-summary::-webkit-details-marker { display: none; }
/* メニューリスト（開く部分） */
.pulldown-list {
position: absolute;
top: 100%; /* ボタンの真下 */
left: 0;
width: 100%; /* 親(details)と同じ幅 */
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
z-index: 1000; /* 最前面に */
margin-top: 5px;
overflow: hidden;
}
.pulldown-list a {
display: block;
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
color: #333;
font-size: 0.9rem;
text-decoration: none;
}
.pulldown-list a:hover {
background: #f9f9f9;
color: #455A64;
}
/* スマホ対応 */
@media (max-width: 768px) {
.catalog-pulldown-menu {
flex-direction: column;
align-items: center;
}
.pulldown-details, .pulldown-summary {
width: 100%;
max-width: 300px;
}
}
/* 1. ヘッダー画像の設定（高さ500pxで強制固定） */
#sub-visual {
width: 100vw !important;
height: 500px !important; /* ★ここが消えていました。500pxを追加 */
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: none !important;
/* 画像の位置調整 */
background-size: cover !important;
background-position: center !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#sub-visual .page-title {
color: #FFF !important;
text-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
font-size: 2.4rem !important;
font-weight: bold !important;
font-family: "Yu Mincho", serif !important;
}
/* 2. リストエリアの背景 */
.news-page-wrapper {
background-color: #F7F7F7 !important;
padding: 60px 0 100px !important;
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
}
.news-page-wrapper .inner-container {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* 3. カード型リスト */
.news-card-container {
background-color: #FFF !important;
border-radius: 12px !important;
box-shadow: 0 5px 20px rgba(0,0,0,0.03) !important;
padding: 10px 40px !important;
}
/* 各行 */
.news-row {
display: flex !important;
align-items: center !important;
padding: 25px 0 !important;
border-bottom: 1px solid #eee !important;
text-decoration: none !important;
color: #333 !important;
transition: all 0.3s ease !important;
}
.news-row:last-child { border-bottom: none !important; }
.news-row:hover {
background-color: #fcfcfc !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin-left: -10px !important;
margin-right: -10px !important;
}
/* 日付・ラベル */
.news-meta {
display: flex !important;
align-items: center !important;
min-width: 200px !important;
flex-shrink: 0 !important;
}
.news-date {
font-family: 'Lato', Arial, sans-serif !important;
color: #888 !important;
font-size: 0.9rem !important;
margin-right: 15px !important;
font-weight: bold !important;
}
.news-label {
display: inline-block !important;
padding: 4px 10px !important;
font-size: 0.7rem !important;
color: #fff !important;
border-radius: 4px !important;
background-color: #ccc !important;
min-width: 70px !important;
text-align: center !important;
}
/* カテゴリ色 */
.label-info { background-color: #5A7B91 !important; }
.label-event { background-color: #d4a373 !important; }
.label-product { background-color: #888 !important; }
/* タイトル */
.news-content {
flex-grow: 1 !important;
padding-right: 20px !important;
}
.news-title {
font-size: 1rem !important;
font-weight: normal !important;
margin: 0 !important;
}
.news-row:hover .news-title {
color: #5A7B91 !important;
font-weight: bold !important;
}
/* 矢印 */
.news-arrow {
width: 8px !important;
height: 8px !important;
border-top: 2px solid #ccc !important;
border-right: 2px solid #ccc !important;
transform: rotate(45deg) !important;
}
.news-row:hover .news-arrow {
border-color: #5A7B91 !important;
}
/* ページネーション */
.news-pagination {
margin-top: 50px !important;
text-align: center !important;
}
.page-numbers {
display: inline-block !important;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
margin: 0 5px !important;
border: 1px solid #ddd !important;
color: #333 !important;
text-decoration: none !important;
background: #fff !important;
border-radius: 50% !important;
}
.page-numbers.current {
background-color: #5A7B91 !important;
color: #fff !important;
border-color: #5A7B91 !important;
}
/* スマホ対応 */
@media (max-width: 768px) {
#sub-visual { height: 300px !important; } /* スマホは少し低く */
.news-card-container { padding: 20px !important; }
.news-row {
flex-direction: column !important;
align-items: flex-start !important;
padding: 20px 0 !important;
}
.news-meta {
width: 100% !important;
margin-bottom: 10px !important;
}
.news-arrow { display: none !important; }
}
/* ==================================== */
/* 採用ページ（新デザイン） */
/* ==================================== */
/* 1. ページ全体設定（右ズレを直す計算式に変更） */
.recruit-page-wrapper {
/* "left: 50%" を使わず、左右のマージン計算で広げる方式に変更 */
/* これにより親要素の幅に関係なく、画面の端まで正確に広がります */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
/* 位置リセット */
position: relative !important;
left: auto !important;
right: auto !important;
/* 縦位置・背景 */
margin-top: -60px !important;
padding: 0 !important;
overflow-x: hidden !important; /* 横スクロール防止 */
font-family: "游ゴシック体", "Yu Gothic", sans-serif;
color: #333;
}
/* 導入メッセージ */
.recruit-intro {
text-align: center;
margin-bottom: 100px;
}
.recruit-main-title {
font-family: "Yu Mincho", serif;
font-size: 2rem;
margin-bottom: 30px;
font-weight: bold;
}
.recruit-lead {
line-height: 2;
font-size: 1rem;
}
/* セクション区切り（パート・正社員） */
.recruit-block {
margin-bottom: 100px;
}
.recruit-cat-title {
text-align: center;
font-size: 1.6rem;
font-family: "Yu Mincho", serif;
margin-bottom: 50px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
}
/* タイトルの下線 */
.recruit-cat-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: #333;
}
/* --- ジグザグレイアウト --- */
.zigzag-row {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 60px;
}
/* 画像左・文字右のパターン */
.zigzag-row.reverse {
flex-direction: row-reverse;
}
.zigzag-text {
width: 50%;
}
.zigzag-img {
width: 50%;
}
.zigzag-img img {
width: 100%;
height: auto;
border-radius: 8px; /* 角を少し丸く */
}
.zigzag-heading {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 20px;
font-family: "Yu Mincho", serif;
border-left: 4px solid #455A64;
padding-left: 15px;
}
.zigzag-text p {
line-height: 1.8;
font-size: 0.95rem;
}
/* --- 募集要項リスト --- */
.recruit-requirements {
background-color: #f9f9f9;
padding: 40px;
margin-bottom: 40px;
border-radius: 4px;
}
.req-heading {
text-align: center;
font-size: 1.1rem;
margin-bottom: 30px;
font-weight: bold;
}
.req-list {
display: flex;
flex-wrap: wrap;
margin: 0;
border-top: 1px solid #ddd;
}
.req-list dt {
width: 30%;
padding: 15px 0;
font-weight: bold;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
}
.req-list dd {
width: 70%;
padding: 15px 0 15px 20px;
margin: 0;
border-bottom: 1px solid #ddd;
line-height: 1.6;
}
/* ボタンエリア */
.recruit-btn-center {
text-align: center;
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
.pc-only { display: none; }
.zigzag-row,
.zigzag-row.reverse {
flex-direction: column-reverse; /* 画像を上に、文字を下に */
gap: 20px;
}
.zigzag-text,
.zigzag-img {
width: 100%;
}
.recruit-requirements {
padding: 20px;
}
.req-list dt,
.req-list dd {
width: 100%;
display: block;
border-bottom: none;
padding: 10px 0;
}
.req-list dt {
background-color: #eee;
padding: 8px 10px;
margin-top: 15px;
}
.req-list dd {
padding-left: 10px;
border-bottom: 1px solid #ddd;
}
}
/* ==================================== */
/* お問い合わせページのデザイン */
/* ==================================== */
.contact-page-wrapper {
width: 100%;
overflow: hidden; /* 横スクロール防止 */
}
/* --- 1. ヘッダー画像（最強の全幅指定） --- */
#contact-visual {
/* 画面幅いっぱいに広げる計算式 */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
height: 300px;
background-image: url('https://takaoka758.com/wp-content/uploads/2025/12/取り扱い商品.png'); /* 共通の画像を一旦使用 */
background-size: cover;
background-position: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 80px;
}
/* 画像を少し暗くするフィルター */
#contact-visual::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
/* タイトル文字 */
#contact-visual .page-title {
position: relative;
z-index: 2;
color: #FFF !important;
font-family: "Yu Mincho", serif;
font-size: 2.4rem;
font-weight: bold;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
margin: 0;
/* 縦書き解除・横書き強制 */
writing-mode: horizontal-tb !important;
-ms-writing-mode: lr-tb !important;
}
/* --- 2. 導入文 --- */
.contact-intro {
max-width: 800px;
margin: 0 auto 60px;
padding: 0 20px;
text-align: center;
}
.contact-lead-heading {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 30px;
font-family: "Yu Mincho", serif;
}
.contact-note-red {
color: #cc0000;
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 20px;
}
.contact-note-small {
font-size: 0.85rem;
color: #666;
line-height: 1.6;
}
/* ==================================== */
/* お問い合わせフォーム（修正版） */
/* ==================================== */
/* 1. フォーム全体の外枠 */
.custom-table-form {
border: 1px solid #ddd;
border-bottom: none;
max-width: 800px;
margin: 60px auto;
font-family: "游ゴシック体", "Yu Gothic", sans-serif;
}
/* 2. 行のデザイン */
.form-row {
display: flex;
border-bottom: 1px solid #ddd;
}
/* 3. 左側ラベル（グレー背景） */
.form-label {
width: 30%;
background-color: #f9f9f9;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
font-size: 0.95rem;
border-right: 1px solid #ddd;
box-sizing: border-box;
}
/* 必須マーク */
.badge-required {
background-color: #cc0000;
color: #fff;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 2px;
font-weight: normal;
margin-left: 10px;
}
/* 4. 右側入力エリア（白背景） */
.form-input {
width: 70%;
padding: 15px 20px;
background-color: #fff;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap; /* 中身が折り返せるようにする */
}
/* 5. テキスト入力欄のデザイン */
.input-field {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
box-sizing: border-box;
background-color: #fff;
}
/* 6. ラジオボタンエリア（★ここを修正：横並び＆クリック有効化） */
.radio-area .wpcf7-list-item {
display: inline-block !important; /* 横並びにする */
margin: 5px 20px 5px 0 !important; /* 間隔をあける */
}
.radio-area label {
cursor: pointer;
font-weight: normal;
display: flex;
align-items: center;
}
.radio-area input[type="radio"] {
margin-right: 5px;
transform: scale(1.2); /* 少し大きくして押しやすく */
cursor: pointer;
}
/* 7. テキストエリア（その他） */
.last-row .form-label,
.last-row .form-input {
align-items: flex-start;
padding-top: 30px;
}
textarea.input-field {
height: 200px;
resize: vertical;
}
/* 8. 送信ボタン（★ここを修正：青色に戻す） */
.form-submit-area {
text-align: center;
margin-top: 40px;
margin-bottom: 80px;
}
.btn-submit {
background-color: #5A7B91 !important; /* 元の青色に戻す */
color: #fff !important;
font-size: 1.1rem;
padding: 15px 80px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
font-weight: bold;
box-shadow: 0 4px 10px rgba(90, 123, 145, 0.4);
}
.btn-submit:hover {
background-color: #455A64 !important;
transform: translateY(2px);
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
.custom-table-form { border: none; }
.form-row { flex-direction: column; border: none; margin-bottom: 20px; }
.form-label { width: 100%; background: none; border: none; padding: 0 0 5px 0; justify-content: flex-start; }
.badge-required { margin-left: 10px; }
.form-input { width: 100%; padding: 0; border: none; }
/* スマホではラジオボタンを縦に並べる */
.radio-area .wpcf7-list-item {
display: block !important;
margin-bottom: 10px !important;
}
}
/* ==================================== */
/* 名入れオリジナル商品ページのデザイン */
/* ==================================== */
/* --- 共通設定 --- */
.original-page-wrapper {
width: 100%;
overflow-x: hidden; /* 横スクロール防止 */
}
/* コンテンツ幅を制限するインナーコンテナ */
.inner-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* セクションの基本スタイル */
.original-section {
padding: 80px 0;
}
/* セクション見出し */
.section-heading {
font-family: "Yu Mincho", serif;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
color: #333;
}
/* --- 1. ヘッダービジュアル --- */
#original-visual {
/* 画面全幅にする強力な設定 */
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0;
height: 400px; /* 画像に合わせて高さを調整してください */
background-image: url('https://takaoka758.com/wp-content/uploads/2025/12/名入れ商品について-1.png');
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
/* 画像を少し暗くするフィルター */
#original-visual::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* タイトル文字 */
.page-title-large {
position: relative;
color: #FFF;
font-family: "Yu Mincho", serif;
font-size: 2.8rem;
font-weight: bold;
text-shadow: 0 2px 5px rgba(0,0,0,0.5);
margin: 0;
writing-mode: horizontal-tb !important; /* 横書き強制 */
}
/* --- 2. 導入セクション --- */
.intro-section {
background-color: #fff;
text-align: center;
}
.intro-text {
font-size: 1rem;
line-height: 2;
color: #333;
}
/* --- 3. 特徴セクション（グレー背景） --- */
.features-section {
background-color: #f9f9f9; /* 薄いグレー */
}
.features-grid {
display: flex;
justify-content: space-between;
gap: 40px;
}
.feature-item {
width: 32%; /* 3列配置 */
text-align: center;
}
.feature-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 20px;
font-family: "Yu Mincho", serif;
color: #455A64; /* アクセントカラー */
}
.feature-text {
font-size: 0.95rem;
line-height: 1.8;
text-align: left; /* 本文は左揃えで見やすく */
}
/* --- 4. 流れセクション（タイムライン） --- */
.flow-section {
background-color: #fff;
}
.flow-timeline {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 20px 0;
}
/* タイムラインの縦線 */
.flow-timeline::before {
content: '';
position: absolute;
top: 30;
left: 30px; /* 数字の中心に合わせる */
width: 4px;
height: 100%;
background-color: #e0e0e0;
z-index: 0;
}
.flow-step {
position: relative;
margin-bottom: 50px;
padding-left: 80px; /* 数字の分のスペースを空ける */
z-index: 1;
}
.flow-step:last-child {
margin-bottom: 0;
}
/* ステップ番号（円形） */
.step-number {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background-color: #5A7B91; /* 青色 */
color: #fff;
font-size: 1.8rem;
font-weight: bold;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* 最後のステップの番号だけ色を変える場合 */
.step-number.last-step {
background-color: #5A7B91; /* 濃い青など */
}
.step-content {
background: #fff;
padding: 5px 0 20px;
}
.step-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.step-content p {
font-size: 0.95rem;
line-height: 1.8;
color: #555;
}
/* --- 5. 入稿・データ送付方法セクション（グレー背景） --- */
.submission-section {
background-color: #f9f9f9;
}
.submission-block {
margin-bottom: 60px;
}
.submission-block:last-child {
margin-bottom: 0;
}
/* チェックリスト装飾 */
.check-list {
list-style: none;
padding: 0;
max-width: 800px;
margin: 0 auto;
}
.check-list li {
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font-size: 1rem;
line-height: 1.6;
font-weight: bold;
}
/* チェックマークアイコン（CSSで作成） */
.check-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
background-color: #5A7B91;
color: #fff;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
/* データ送付方法 */
.contact-method-item {
border-top: 1px solid #ddd;
padding: 30px 0;
max-width: 800px;
margin: 0 auto;
}
.contact-method-item:first-of-type {
border-top: none;
}
.method-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 15px;
}
.method-detail {
font-size: 1rem;
line-height: 1.8;
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
.page-title-large {
font-size: 2rem;
}
.intro-text br { display: none; } /* 改行を無効化 */
/* 特徴を縦積みに */
.features-grid {
flex-direction: column;
gap: 40px;
}
.feature-item {
width: 100%;
}
/* タイムラインの調整 */
.flow-timeline::before {
left: 20px; /* 線の位置を調整 */
}
.step-number {
width: 40px;
height: 40px;
font-size: 1.4rem;
left: 0;
}
.flow-step {
padding-left: 60px; /* スペースを狭める */
margin-bottom: 40px;
}
/* 入稿方法 */
.check-list li {
font-size: 0.95rem;
}
}
/* ==================================== */
/* ヘッダー画像 高さ拡大修正 (提案B) */
/* ==================================== */
/* 1. 下層ページ共通のヘッダー高さを400pxに上書き */
#main-visual,
#sub-visual,
#contact-visual,
#original-visual {
height: 500px !important; /* 300px -> 500px に拡大 */
}
/* 2. トップページ（600px）の設定は維持（念のため） */
#main-visual {
height: 600px !important;
}
/* 3. スマホ表示での調整（画像が大きくなりすぎないように） */
@media (max-width: 768px) {
#sub-visual,
#contact-visual,
#original-visual {
height: 300px !important; /* スマホでは300pxに戻す */
}
}
/* ==================================== */
/* トップページ：取扱商品の縦横比強制統一 */
/* ==================================== */
.product-col a {
display: block;
text-decoration: none;
color: #333;
}
/* ==================================== */
/* 最終フォント設定（サイト全体を明朝体に統一） */
/* ==================================== */
/* 1. サイト全体のベースフォントを明朝体にする */
body,
p,
li,
a,
input,
textarea,
button,
.product-caption,
.recruit-text,
.news-title {
/* 游明朝（高級感）、ヒラギノ明朝、一般的な明朝体（セリフ体）の順で指定 */
font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif !important;
font-weight: 500; /* 本文の太さは500程度で読みやすく */
line-height: 1.8; /* 行間は読みやすさを維持 */
}
/* 2. 見出しやタイトルなど、特に強調したい部分（明朝体 太字） */
h1, h2, h3, h4, h5,
.recruit-catch,
.section-heading,
.page-title,
.page-title-large,
.recruit-main-title,
.contact-lead-heading,
.main-nav a, /* ヘッダーメニュー */
.footer-nav a, /* フッターメニュー */
.job-category-title {
/* 太字は「游明朝 Demibold」や一般的な bold で対応 */
font-family: "游明朝体", "Yu Mincho Demibold", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", serif !important;
font-weight: bold !important;
}
/* 3. 英字部分（Times New Romanの意図を再現） */
/* ONLINE CATALOGなどのアルファベット部分にセリフ体を適用 */
.catalog-main-title,
.catalog-main-title .jp-sub {
font-family: 'Times New Roman', Times, serif, "游明朝", "Yu Mincho" !important;
}
/* 2. 見出し・装飾部分の明朝体指定 */
/* 伝統、格調高さを出す部分 */
h1, h2, h3, h4, h5,
.recruit-catch,
.section-heading,
.page-title,
.page-title-large,
.recruit-main-title,
.contact-lead-heading {
/* 游明朝（高級感）、ヒラギノ明朝、最後に一般的な明朝体 */
font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
font-weight: bold; /* 太すぎないウェイトで上品さを出す */
}
/* 3. 英字部分（Times New Romanの意図を再現） */
/* ONLINE CATALOGなどのアルファベット部分にセリフ体を適用 */
.catalog-main-title,
.catalog-main-title .jp-sub {
font-family: 'Times New Roman', Times, serif, "游明朝", "Yu Mincho";
}
/* ==================================== */
/* 髙岡陶器について：h3見出しのフォント強制修正 */
/* ==================================== */
/* 1. ページ内のh3要素に明朝体を強制適用 */
/* about-heading クラスを持つ h3タグをすべてターゲットにします */
.about-heading {
/* 游明朝を最優先に指定し、!importantで確実に上書き */
font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif !important;
font-weight: bold !important; /* 太さも統一 */
font-size: 2rem !important; /* サイズも統一 */
}
/* 2. ページ内で固有のクラスを持つ見出しもすべて明朝体に */
.showroom-heading-left,
.recruit-cat-title {
font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif !important;
font-weight: bold !important;
}
/* ==================================== */
/* 髙岡陶器について：レイアウト修正 */
/* ==================================== */
/* 1. 社長挨拶文を左寄せにする */
.president-text {
text-align: left !important; /* 強制的に左寄せ */
max-width: 800px; /* 横に広がりすぎないよう制限 */
margin: 0 auto 40px; /* 中央配置しつつ下余白 */
line-height: 2;
}
/* 2. 選ばれる理由を3列にする */
.reasons-grid {
display: flex;
justify-content: space-between;
gap: 30px; /* ブロック間の隙間 */
margin-top: 50px;
}
.reason-block {
width: 32%; /* 3列にするため約1/3 */
text-align: center; /* 中身は中央揃え */
margin-bottom: 0; /* 縦並び用の余白をリセット */
}
.reason-img img {
width: 100%;
height: 200px; /* 画像の高さを揃える */
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}
.reason-sub-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 15px;
height: 3em; /* タイトルが2行になっても高さを揃える */
display: flex;
align-items: center;
justify-content: center;
}
.company-text {
text-align: left; /* 本文は読みやすく左寄せ */
font-size: 0.95rem;
line-height: 1.8;
}
/* --- スマホ対応（縦並びに戻す） --- */
@media (max-width: 768px) {
.reasons-grid {
flex-direction: column; /* 縦並び */
gap: 50px;
}
.reason-block {
width: 100%; /* 横幅いっぱい */
}
.reason-sub-title {
height: auto;
margin-bottom: 10px;
}
}
/* ==================================== */
/* 選ばれる理由：レイアウト微調整 */
/* ==================================== */
/* 1. 見出し周り（REASONと日本語を縦積みに） */
.reason-header {
margin-bottom: 20px;
text-align: center;
}
.reason-en-label {
display: block; /* 確実に改行させる */
font-family: 'Times New Roman', serif; /* 英語はセリフ体で高級感 */
font-size: 1.2rem;
color: #455A64; /* アクセントカラー */
letter-spacing: 0.1em;
margin-bottom: 10px;
font-weight: bold;
}
.reason-sub-title {
display: block;
font-size: 1.1rem;
line-height: 1.5;
margin: 0;
}
/* 2. 画像を「横長長方形」にする */
.reason-img-wide {
width: 100%;
margin-bottom: 20px;
line-height: 0; /* 画像下の隙間消し */
}
.reason-img-wide img {
width: 100%;
/* 正方形の画像でも強制的に横長（16:9）でトリミング表示 */
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 4px;
}
/* 3. 説明文を画像幅に合わせて揃える */
.company-text-justified {
width: 100%;
text-align: justify; /* 両端揃え（文頭・文末を画像幅に揃える） */
text-justify: inter-ideograph;
font-size: 0.95rem;
line-height: 1.8;
margin: 0; /* 余計な余白を削除 */
}
/* スマホ対応 */
@media (max-width: 768px) {
.reason-img-wide img {
aspect-ratio: 3 / 2; /* スマホでは少し高さを出す */
}
}
/* ==================================== */
/* 選ばれる理由：重複表示の修正 */
/* ==================================== */
/* 昔のCSS（::beforeでREASONと表示させていたもの）を無効化 */
.reason-sub-title::before {
content: none !important;
display: none !important;
}
/* カウンター設定もリセット */
.reason-block {
counter-increment: none !important;
}
/* 新しいレイアウトの微調整（念のため） */
.reason-header {
display: block !important;
margin-bottom: 15px !important;
}
/* ==================================== */
/* 会社概要テキスト：強制左寄せ修正 */
/* ==================================== */
/* クラスだけでなく、中のpタグにも直接左寄せを指定 */
.president-text,
.president-text p {
text-align: left !important; /* 強制的に左寄せ */
text-align-last: left !important; /* 最終行も左寄せ */
margin-left: auto !important;
margin-right: auto !important;
max-width: 800px !important;
}
/* ただし、写真などのインライン要素は中央に戻す */
.simple-block .president-photo,
.simple-block .simple-company-table {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* ==================================== */
/* 選ばれる理由：ワイド化＆調整 */
/* ==================================== */
/* 1. このセクションだけ幅を1280pxまで広げる */
.reasons-grid.wide-grid {
max-width: 1280px !important; /* 通常より広く */
width: 95% !important; /* 画面端ギリギリまで使う */
margin: 50px auto !important;
gap: 40px !important; /* 列の間隔も少し広げる */
}
/* 2. タイトルの文字サイズ調整（一行に収めるため） */
.wide-grid .reason-sub-title {
font-size: 1.1rem !important; /* 少し小さくして改行を防ぐ */
white-space: nowrap !important; /* 強制的に一行にする */
overflow: hidden !important;
text-overflow: ellipsis !important; /* 万が一はみ出たら...にする */
margin-bottom: 15px !important;
}
/* 3. 画像を大きく（幅いっぱいに） */
.wide-grid .reason-img-wide img {
width: 100% !important;
aspect-ratio: 16 / 9 !important; /* 横長比率は維持 */
height: auto !important;
}
/* 4. 説明文を見やすく */
.wide-grid .company-text-justified {
font-size: 0.95rem !important;
line-height: 1.9 !important; /* 行間を少し開けて読みやすく */
text-align: left !important; /* 左寄せ（ジャスティファイより自然） */
text-align-last: left !important;
}
/* スマホ対応（スマホではタイトルを折り返して表示） */
@media (max-width: 1024px) {
.reasons-grid.wide-grid {
flex-direction: column !important; /* タブレット以下は縦並び */
max-width: 600px !important;
}
.wide-grid .reason-sub-title {
white-space: normal !important; /* スマホでは改行許可 */
font-size: 1.3rem !important;
}
}
/* ==================================== */
/* 髙岡陶器について：最終レイアウト調整 */
/* ==================================== */
/* 1. 選ばれる理由：幅を1280pxまで拡張（ワイド表示） */
.about-section.reason-section .reasons-grid {
width: 100% !important;
max-width: 1280px !important; /* コンテンツ幅を広く */
margin: 0 auto 50px !important;
padding: 0 20px !important;
display: flex !important;
justify-content: space-between !important;
gap: 40px !important; /* カラム間の隙間を広げる */
}
.reason-block {
width: 32% !important; /* 3列維持 */
max-width: none !important;
margin-bottom: 0 !important;
text-align: left !important; /* 基本は左揃え */
}
/* 2. 画像のサイズアップと比率固定（横長） */
.reason-img-wide {
width: 100% !important;
margin-bottom: 20px !important;
}
.reason-img-wide img {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important; /* 横長比率 (1.77:1) */
object-fit: cover !important;
border-radius: 8px !important;
}
/* 3. タイトル（REASON 01 など）のデザイン */
.reason-header {
text-align: center !important; /* タイトル周りは中央揃え */
margin-bottom: 20px !important;
}
.reason-en-label {
display: block !important;
font-size: 1.1rem !important;
font-weight: bold !important;
color: #455A64 !important;
letter-spacing: 0.1em !important;
margin-bottom: 5px !important;
}
/* タイトルを1行に収めるための調整 */
.reason-sub-title {
font-size: 1.1rem !important; /* 少しサイズを調整 */
white-space: nowrap !important; /* 改行させない */
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.4 !important;
}
/* 以前のCSSによる「REASON」重複表示を完全に消す */
.reason-sub-title::before {
content: none !important;
display: none !important;
}
/* 4. 説明文の読みやすさ改善 */
.company-text-justified {
font-size: 0.95rem !important;
line-height: 1.9 !important; /* 行間を広めに */
text-align: left !important; /* 左揃え */
width: 100% !important;
}
/* 5. 会社概要（社長挨拶）のテキスト左寄せ */
.president-text,
.president-text p {
text-align: left !important;
text-align-last: left !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 800px !important;
}
/* スマホ対応 */
@media (max-width: 1024px) {
.about-section.reason-section .reasons-grid {
flex-direction: column !important; /* タブレット以下は縦並び */
max-width: 600px !important;
}
.reason-block {
width: 100% !important;
}
.reason-sub-title {
white-space: normal !important; /* スマホでは改行許可 */
}
}
/* ==================================== */
/* 選ばれる理由：画面全幅・最大化修正 */
/* ==================================== */
/* 1. 親枠を無視して、セクション自体を画面幅いっぱいに広げる（Breakout） */
.about-section.reason-section {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: none !important;
padding: 0 !important; /* 余白はグリッド側で調整 */
}
/* 2. グリッドの幅を1600pxまで解放する */
.about-section.reason-section .reasons-grid {
width: 96% !important; /* 画面の96%を使う */
max-width: 1600px !important; /* 最大幅を1600pxに拡大 */
margin: 0 auto 80px !important;
gap: 40px !important;
display: flex !important;
justify-content: center !important;
}
/* 3. 各ブロックの幅調整 */
.reason-block {
width: 32% !important;
max-width: none !important; /* 制限解除 */
flex: 1 1 auto !important; /* 均等に伸びるように */
}
/* 4. タイトルの調整（切れないようにする） */
.about-section.reason-section .reason-sub-title {
font-size: 1.2vw !important; /* ★画面幅に応じて文字サイズを変える（PCで一行に収める秘策） */
min-font-size: 14px !important; /* 小さくなりすぎ防止 */
white-space: nowrap !important;
overflow: visible !important; /* はみ出しても切らない */
text-overflow: clip !important; /* ...にしない */
margin-bottom: 20px !important;
}
/* 5. PCでの文字サイズの下限ガード（画面が広すぎるとき用） */
@media (min-width: 1400px) {
.about-section.reason-section .reason-sub-title {
font-size: 1.3rem !important; /* 十分広いときは固定サイズ */
}
}
/* 6. 画像の比率調整（よりワイドに） */
.about-section.reason-section img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
object-fit: cover !important;
}
/* --- スマホ対応（縦並びに戻す） --- */
@media (max-width: 1024px) {
.about-section.reason-section .reasons-grid {
flex-direction: column !important;
max-width: 600px !important;
}
.reason-block {
width: 100% !important;
}
/* スマホでは文字サイズを固定に戻し、改行を許可 */
.about-section.reason-section .reason-sub-title {
font-size: 1.3rem !important;
white-space: normal !important;
overflow: visible !important;
}
}
/* ==================================== */
/* 会社概要：写真ラベル位置修正（左上へ） */
/* ==================================== */
.photo-label {
/* 位置を上端に変更 */
top: 0 !important;
bottom: auto !important; /* 下端の設定を解除 */
left: 0 !important;
/* 角丸のデザインを左上配置に合わせて調整 */
border-radius: 0 !important; /* 一旦リセット */
border-bottom-right-radius: 10px !important; /* 右下だけ丸くする */
/* 念のため他のスタイルも維持 */
background: #455A64 !important;
color: #fff !important;
padding: 6px 18px !important; /* 少しだけ大きくして見やすく */
letter-spacing: 0.1em !important;
}
/* スマホなどで画像が角丸になっている場合、ラベルがはみ出さないように調整 */
.president-photo {
overflow: hidden !important; /* 画像の角丸に合わせてラベルを切り取る */
border-radius: 12px !important; /* 画像自体の角丸を確実に適用 */
}
/* ==================================== */
/* お問い合わせページ：注意書きの行間 完全統一 */
/* ==================================== */
/* 1. 赤字の注意書きの行間を完全に詰める */
.contact-note-red {
line-height: 1.2 !important; /* 1.2に強制統一 */
margin-bottom: 10px !important;
}
/* 2. 小さな文字の注意書きの行間を完全に詰める */
.contact-note-small {
line-height: 1.2 !important; /* 1.2に強制統一 */
margin-bottom: 0 !important;
}
/* 3. HTML内の
で改行された部分の余計な隙間を抑制 */
.contact-note-small br {
line-height: 0.1; /*
自体が持つ余分な高さを抑制 */
}
/* ==================================== */
/* 最終調整：ラジオボタン＆送信ボタン復活 */
/* ==================================== */
/* 1. ラジオボタン（丸ポチ）の形を強制的に正常に戻す */
input[type="radio"] {
width: auto !important; /* 幅100%を解除 */
height: auto !important; /* 高さ制限を解除 */
appearance: auto !important; /* ブラウザ標準の見た目に戻す */
-webkit-appearance: radio !important;
display: inline-block !important;
margin-right: 5px !important;
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
transform: scale(1.2); /* 少し大きくして押しやすく */
}
/* 2. 選択肢を横並びにする */
.wpcf7-list-item {
display: inline-block !important;
margin: 0 15px 5px 0 !important;
}
.wpcf7-list-item label {
display: flex !important;
align-items: center !important;
cursor: pointer !important;
width: auto !important;
}
/* 3. 送信ボタンを確実に「青色」にする */
input.btn-submit {
background-color: #5A7B91 !important;
color: #fff !important;
font-weight: bold !important;
border: none !important;
padding: 15px 80px !important;
border-radius: 4px !important;
cursor: pointer !important;
width: auto !important; /* 勝手に広がらないように */
display: inline-block !important;
}
input.btn-submit:hover {
background-color: #455A64 !important; /* ホバー時は少し濃く */
opacity: 1 !important;
}
/* ==================================== */
/* お問い合わせフォーム（標準機能版） */
/* ==================================== */
/* 外枠とフォント */
.custom-table-form {
border: 1px solid #ddd;
border-bottom: none;
max-width: 800px;
margin: 60px auto;
font-family: "游ゴシック体", "Yu Gothic", sans-serif;
}
/* 行の設定 */
.form-row {
display: flex;
border-bottom: 1px solid #ddd;
}
/* ラベル（左側） */
.form-label {
width: 30%;
background-color: #f9f9f9;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold;
font-size: 0.95rem;
border-right: 1px solid #ddd;
box-sizing: border-box;
}
/* 必須マーク */
.badge-required {
background-color: #cc0000;
color: #fff;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 2px;
font-weight: normal;
margin-left: 10px;
}
/* 入力エリア（右側） */
.form-input {
width: 70%;
padding: 15px 20px;
background-color: #fff;
box-sizing: border-box;
display: flex;
align-items: center;
}
/* 入力欄（テキスト・メールなど） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
background-color: #fff;
box-sizing: border-box;
}
/* ラジオボタンの横並び設定 */
.radio-area .wpcf7-list-item {
display: inline-block;
margin: 0 15px 5px 0;
}
.radio-area label {
cursor: pointer;
display: flex;
align-items: center;
}
.radio-area input[type="radio"] {
width: auto;
height: auto;
margin-right: 5px;
transform: scale(1.2);
cursor: pointer;
}
/* テキストエリアの調整 */
.last-row .form-label,
.last-row .form-input {
align-items: flex-start;
padding-top: 20px;
}
.wpcf7 textarea {
height: 200px;
resize: vertical;
}
/* 送信ボタン */
.form-submit-area {
text-align: center;
margin: 40px 0 80px;
}
.form-submit-area input[type="submit"] {
background-color: #5A7B91;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
padding: 15px 80px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
width: auto;
display: inline-block;
}
.form-submit-area input[type="submit"]:hover {
background-color: #455A64;
opacity: 1;
}
/* スマホ対応 */
@media (max-width: 768px) {
.custom-table-form { border: none; }
.form-row { flex-direction: column; border: none; margin-bottom: 20px; }
.form-label { width: 100%; border: none; background: none; padding: 0 0 5px 0; justify-content: flex-start; }
.form-input { width: 100%; padding: 0; }
.badge-required { margin-left: 10px; }
.radio-area .wpcf7-list-item { display: block; margin-bottom: 8px; }
}
/* ==================================== */
/* 取扱商品カタログ画像：強制表示修正 */
/* ==================================== */
/* 画像のサイズと表示を強制的に指定 */
.catalog-link img {
width: 100% !important;
height: auto !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
/* 枠線や影の設定（念のため再定義） */
vertical-align: bottom !important;
}
/* 画像を囲む枠（figure）の高さを確保 */
.catalog-link figure {
width: 100% !important;
height: auto !important;
min-height: 100px !important; /* 万が一画像が出なくても枠は確保 */
margin: 0 0 10px 0 !important;
overflow: visible !important; /* 画像が隠れないようにする */
display: block !important;
background-color: #fff !important;
}
/* グリッドレイアウトの安定化 */
.catalog-item {
display: block !important;
visibility: visible !important;
}
/* ==================================== */
/* 取扱商品：カタロググリッドを3列にする */
/* ==================================== */
/* 1. グリッド全体の隙間設定 */
.catalog-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important; /* アイテム間の隙間 */
justify-content: flex-start !important; /* 左詰めで整列 */
}
/* 2. 各アイテムの幅を「3列」に計算して固定 */
.catalog-item {
/* 計算式： (全体幅100% - 隙間2つ分60px) ÷ 3つ
これでピッタリ3等分になります
*/
width: calc((100% - 60px) / 3) !important;
margin-bottom: 30px !important;
/* 念のため余計なマージンをリセット */
margin-left: 0 !important;
margin-right: 0 !important;
}
/* --- スマホ対応（スマホでは1列で見やすく） --- */
@media (max-width: 768px) {
.catalog-item {
width: 100% !important; /* スマホは1列 */
margin-bottom: 20px !important;
}
}
/* ==================================== */
/* 名入れページ強制修正（追加CSS用） */
/* ==================================== */
/* 1. ページ上部の隙間を消す */
.page-id-original #main-visual,
.page-id-original #sub-visual {
margin-bottom: 0 !important;
}
.original-section.intro-section {
margin-top: 0 !important;
padding-top: 30px !important;
}
/* 2. 背景を画面幅いっぱい（MAX）に広げる＆グレー背景 */
.original-section.intro-section,
.original-section.submission-section {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: none !important;
background-color: #F7F7F7 !important; /* 薄いグレー */
padding: 80px 0 !important;
}
/* 3. 中身のコンテンツ幅を中央（1000px）に収める */
.inner-container {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* 4. タイトルの下線（罫線）を復活 */
.section-heading {
position: relative !important;
display: inline-block !important;
margin-bottom: 50px !important;
padding-bottom: 15px !important;
font-weight: bold !important;
}
.section-heading::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 60px !important; /* 線の長さ */
height: 3px !important; /* 線の太さ */
background-color: #333 !important; /* 線の色 */
}
/* 5. 流れ（フロー）を中央寄せにする */
.original-section.flow-section {
text-align: center !important;
}
.flow-timeline {
display: inline-block !important;
text-align: left !important;
max-width: 800px !important;
margin: 0 auto !important;
}
/* 6. 入稿方法・データ送付を中央寄せ＆左揃え */
.submission-section {
text-align: center !important;
}
.submission-block {
margin-bottom: 60px !important;
}
.check-list {
display: inline-block !important; /* ブロック中央 */
text-align: left !important; /* 文字は左揃え */
}
.contact-method-item {
text-align: left !important;
max-width: 800px !important;
margin: 0 auto 30px !important;
border-top: 1px solid #ddd !important;
padding-top: 30px !important;
}
/* 7. 絵付け画像の枠調整 */
.feature-img {
background-color: #fff !important;
margin-bottom: 15px !important;
}
.feature-img img {
width: 100% !important;
height: auto !important;
vertical-align: bottom !important;
}
/* ==================================== */
/* 名入れページ：部分修正用（背景MAX・隙間削除・下線復活） */
/* ==================================== */
/* 1. ヘッダー画像との隙間を削除 & 背景を画面端まで広げる */
/* 親要素の余白をネガティブマージンで打ち消し、強制的に画面幅(100vw)まで広げます */
.original-page-wrapper {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: -60px !important; /* 親要素にある60pxの余白を打ち消す */
}
/* 2. 「名入れとは」「入稿方法」の背景色と余白 */
.original-section.intro-section,
.original-section.submission-section {
background-color: #F7F7F7 !important; /* グレー背景 */
padding: 80px 0 !important;
width: 100% !important;
}
/* 3. タイトル（名入れとは）の下線を復活 */
.section-heading {
display: inline-block !important; /* これがないと幅が広がって線が真ん中に来ない */
position: relative !important;
padding-bottom: 15px !important;
margin-bottom: 50px !important;
font-family: "Yu Mincho", serif !important;
}
/* 下線の描画設定 */
.section-heading::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 0 !important;
width: 60px !important; /* 線の長さ */
height: 3px !important; /* 線の太さ */
background-color: #333 !important; /* 線の色 */
display: block !important;
}
/* 4. 入稿方法・データ送付方法の「中央寄せ・左揃え」 */
.submission-block {
text-align: center !important; /* ブロック自体は中央 */
margin-bottom: 60px !important;
}
/* チェックリストを中央に置きつつ、文字は左から読むようにする */
.check-list {
display: inline-block !important;
text-align: left !important;
max-width: 800px !important;
}
/* データ送付方法の各ブロック */
.contact-method-item {
text-align: left !important;
max-width: 800px !important;
margin: 0 auto 30px !important;
border-top: 1px solid #ddd !important;
padding-top: 30px !important;
}
/* 5. ページ内のコンテンツ幅を適正に保つ（広がりすぎ防止） */
.inner-container {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* ==================================== */
/* 名入れページ：余白調整（名入れとは〜画像間） */
/* ==================================== */
/* 1. 「名入れとは」セクションの下余白を減らす */
.original-section.intro-section {
padding-bottom: 30px !important; /* 元は80px程度 */
}
/* 2. 次の「絵付けの種類」セクションの上余白を減らす */
.original-section.features-section {
padding-top: 30px !important; /* 元は80px程度 */
}
/* ==================================== */
/* 採用ページ：完全整列・修正版CSS */
/* ==================================== */
/* 1. ページ全体の基本設定 */
.recruit-page-wrapper {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: -60px !important;
font-family: "游ゴシック体", "Yu Gothic", sans-serif;
color: #333;
overflow-x: hidden;
}
/* 2. 導入セクション（グレー全幅・中央寄せ） */
.recruit-section.intro-section {
background-color: #F7F7F7 !important;
padding: 80px 0 !important;
text-align: center !important; /* テキスト中央寄せ */
width: 100% !important;
}
/* ==================================== */
/* 採用ページ：各セクションの余白修正 */
/* ==================================== */
/* 求人情報（パート・正社員）のセクションに余白を与える */
.recruit-section.job-section {
padding-top: 110px !important; /* 上の余白（ここが重要） */
padding-bottom: 80px !important; /* 下の余白 */
background-color: #FFF !important;
}
/* ついでに、導入文（グレー背景）の余白も確実に確保 */
.recruit-section.intro-section {
padding: 90px 0 !important;
}
/* 3. コンテンツ幅（1000pxで中央固定） */
/* ★ここが「左寄り」を直す重要ポイント */
.inner-container {
max-width: 1000px !important;
width: auto !important; /* ← auto に変更 */
margin: 0 auto !important; /* ← シンプルに auto 指定 */
padding: 0 20px !important;
box-sizing: border-box !important;
display: block !important; /* ← 念のためブロック要素化 */
}
/* 4. セクションタイトル */
.section-heading {
font-family: "Yu Mincho", serif !important;
font-weight: bold !important;
font-size: 2rem !important;
display: inline-block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 15px !important;
}
.section-heading::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 60px !important;
height: 3px !important;
background-color: #333 !important;
}
/* 5. 職種タイトル */
.job-category-title {
font-family: "Yu Mincho", serif !important;
font-size: 1.8rem !important;
text-align: center !important;
margin-bottom: 60px !important;
font-weight: bold !important;
}
/* --- 6. ジグザグレイアウト（整列・重なり防止） --- */
.zigzag-row {
display: flex !important;
align-items: flex-start !important; /* 上揃え */
justify-content: space-between !important;
gap: 60px !important; /* 間隔を広げて重なり防止 */
margin-bottom: 80px !important; /* 行間の余白確保 */
width: 100% !important;
}
/* 逆向き（画像左・文字右） */
.zigzag-row.reverse {
flex-direction: row-reverse !important;
}
/* ★重要：幅を47%ずつに固定して、縦のラインを揃える */
.zigzag-text,
.zigzag-img {
width: 47% !important; /* 左右対称にする */
flex-shrink: 0 !important; /* 勝手に縮ませない */
}
/* 画像の設定 */
.zigzag-img img {
width: 100% !important;
height: auto !important;
border-radius: 8px !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
vertical-align: top !important;
display: block !important;
}
/* テキストの設定 */
.zigzag-text {
text-align: left !important;
}
.zigzag-heading {
font-family: "Yu Mincho", serif !important;
font-size: 1.4rem !important;
font-weight: bold !important;
margin-bottom: 20px !important;
border-bottom: none !important; /* 罫線なし */
}
.zigzag-text p {
line-height: 2 !important;
font-size: 0.95rem !important;
text-align: justify !important;
}
/* --- 7. 募集要項（3列レイアウト） --- */
.recruit-info-3col {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
border-top: 1px solid #ddd !important;
padding-top: 40px !important;
margin-bottom: 60px !important;
width: 100% !important;
}
.info-col {
width: 30% !important; /* 3列均等 */
text-align: left !important;
}
.col-title {
font-weight: bold !important;
font-size: 1.1rem !important;
color: #455A64 !important;
margin-bottom: 15px !important;
font-family: "Yu Mincho", serif !important;
}
.info-col p {
font-size: 0.95rem !important;
line-height: 1.8 !important;
}
/* ボタンエリア */
.recruit-btn-center {
text-align: center !important;
padding-bottom: 80px !important;
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
.recruit-page-wrapper { margin-top: -60px !important; }
.zigzag-row,
.zigzag-row.reverse {
flex-direction: column-reverse !important;
gap: 30px !important;
margin-bottom: 50px !important;
}
.zigzag-text, .zigzag-img {
width: 100% !important; /* スマホは横幅いっぱい */
}
.recruit-info-3col {
flex-direction: column !important;
gap: 40px !important;
}
.info-col {
width: 100% !important;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.info-col:last-child {
border-bottom: none;
}
}
/* ==================================== */
/* フッターロゴ画像のサイズ調整 */
/* ==================================== */
.footer-logo-img {
height: 60px !important; /* ヘッダーと同じくらいのサイズ感で */
width: auto !important;
vertical-align: middle !important;
margin-bottom: 20px !important; /* 下の住所との余白 */
display: block !important;
margin-left: auto !important; /* 中央寄せ（もし必要なら） */
margin-right: auto !important; /* 中央寄せ（もし必要なら） */
}
/* スマホ対応 */
@media (max-width: 768px) {
.footer-logo-img {
height: 50px !important;
}
}
/* ==================================== */
/* ヘッダーと画像の隙間を完全削除 */
/* ==================================== */
/* 1. 全ページ共通：画像の上の余白を強制カット */
#main-visual,
#sub-visual {
margin-top: 0 !important;
padding-top: 0 !important;
/* もしこれでも直らない場合は、下の行の「//」を消して数値を調整してください */
/* margin-top: -1px !important; */
}
/* 2. 【重要】ログイン中の管理バーによるズレを修正 */
/* 管理バーがある時だけ、ヘッダーをその分下にずらして隙間を埋める */
body.admin-bar #site-header {
top: 32px !important; /* PC用 */
}
@media screen and (max-width: 782px) {
body.admin-bar #site-header {
top: 46px !important; /* スマホ用 */
}
}
/* 3. スマホ表示時の隙間修正 */
/* ヘッダーが60pxになるので、本文の開始位置も80px→60pxに縮める */
@media (max-width: 768px) {
body {
padding-top: 60px !important;
}
}
/* ==================================== */
/* 【最終決定版】お問い合わせボタン＆共通設定 */
/* ==================================== */
/* 1. ボタンを囲むエリア（位置ズレ・重なり防止） */
/* btn-area-fix, recruit-btn-center 両方のクラスに対応 */
.btn-area-fix,
.recruit-btn-center {
display: block !important;
width: 100% !important;
max-width: 1000px !important;
margin: 60px auto !important;
text-align: center !important;
clear: both !important; /* フッターとの重なり防止 */
position: relative !important;
z-index: 10 !important;
padding-bottom: 20px !important; /* 余白確保 */
}
/* 2. ボタン本体のデザイン */
/* btn-contact-fix, btn-blue-simple 両方のクラスに対応 */
a.btn-contact-fix,
a.btn-blue-simple {
display: inline-flex !important; /* Flexboxで文字をど真ん中に */
align-items: center !important;
justify-content: center !important;
position: relative !important;
background-color: #5A7B91 !important; /* 青色 */
color: #fff !important; /* 文字色 白 */
font-weight: bold !important;
text-decoration: none !important;
font-size: 16px !important;
line-height: 1.2 !important; /* 行間を締める */
border-radius: 50px !important; /* 丸く */
padding: 18px 60px 18px 40px !important; /* 余白 */
box-shadow: 0 4px 10px rgba(90, 123, 145, 0.3) !important;
transition: all 0.3s ease !important;
/* 強制的にボタンの形を維持 */
width: auto !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 3. 矢印アイコン */
a.btn-contact-fix::after,
a.btn-blue-simple::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
right: 25px !important;
width: 8px !important;
height: 8px !important;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
transform: translateY(-50%) rotate(45deg) !important;
transition: right 0.3s ease !important;
margin-top: -1px !important;
}
/* 4. ホバー時の動き */
a.btn-contact-fix:hover,
a.btn-blue-simple:hover {
background-color: #455A64 !important;
opacity: 1 !important;
color: #fff !important;
}
a.btn-contact-fix:hover::after,
a.btn-blue-simple:hover::after {
right: 15px !important;
}
/* ==================================== */
/* 修正版：お問い合わせボタン（強制適用） */
/* ==================================== */
/* ボタンの外枠（レイアウト崩れ防止） */
.btn-area-fix {
display: block !important;
width: 100% !important;
clear: both !important; /* 回り込みを解除 */
margin-top: 60px !important;
margin-bottom: 60px !important;
text-align: center !important;
position: relative !important;
z-index: 10 !important; /* 他の要素より手前に表示 */
}
/* ボタン本体のデザイン */
a.btn-contact-fix {
display: inline-block !important; /* FlexではなくBlockで安定させる */
position: relative !important;
background-color: #5A7B91 !important; /* 青色 */
color: #fff !important; /* 文字色 白 */
font-weight: bold !important;
text-decoration: none !important;
font-size: 16px !important;
line-height: 1.5 !important;
border-radius: 50px !important; /* 丸く */
padding: 15px 50px 15px 40px !important; /* 余白 */
box-shadow: 0 4px 10px rgba(90, 123, 145, 0.3) !important;
}
/* 矢印アイコン（CSSで描画） */
a.btn-contact-fix::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
right: 20px !important;
width: 8px !important;
height: 8px !important;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
transform: translateY(-50%) rotate(45deg) !important;
}
/* ホバー時 */
a.btn-contact-fix:hover {
background-color: #455A64 !important;
opacity: 0.9 !important;
}
/* ==================================== */
/* 名入れページ専用：お問い合わせボタン修正 */
/* ==================================== */
/* ボタンエリア（ここがフッターとの重なりを防ぎます） */
.btn-area-fix {
display: block;
width: 100%;
clear: both; /* 回り込みを強制解除して重なりを防ぐ */
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
position: relative;
z-index: 10;
}
/* ボタン本体のデザイン */
a.btn-contact-fix {
display: inline-block;
position: relative;
background-color: #5A7B91; /* 高岡陶器ブルー */
color: #fff;
font-weight: bold;
text-decoration: none;
font-size: 16px;
line-height: 1.5;
border-radius: 50px;
padding: 15px 50px 15px 40px;
box-shadow: 0 4px 10px rgba(90, 123, 145, 0.3);
transition: all 0.3s ease;
}
/* 矢印アイコン */
a.btn-contact-fix::after {
content: '';
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translateY(-50%) rotate(45deg);
transition: right 0.3s ease;
}
/* ホバー時の動き */
a.btn-contact-fix:hover {
background-color: #455A64;
opacity: 0.9;
color: #fff;
}
a.btn-contact-fix:hover::after {
right: 15px;
}