.blog-page body,
.single-wrapper-page body,
.company-about-page body,
.philosophy-page body,
.quality-page body,
.purification-page body,
.disaster-prevention-page body,
.invoice-page body,
.topics-single_content-page body
.award-page body,
.past_results-page body,
.results-page body,
.results_categories-page body,
.contact-page body {
background-color: #3B4043;
}
/* ブログページとphilosophyページ */
main:has(.blog),
.blog-page main,
main:has(.single-wrapper),
.single-wrapper-page main,
main:has(.outline),
.outline-page main,
main:has(.company-about),
.company-about-page main,
main:has(.quality),
.quality-page main,
main:has(.purification),
.purification-page main,
main:has(.disaster-prevention),
.disaster-prevention-page main,
main:has(.invoice),
.invoice-page main,
main:has(.philosophy),
.philosophy-page main,
main:has(.philosophy),
.philosophy-page main,
main:has(.topics),
.topics-page main,
main:has(.topics-single_content),
.topics-single_content-page main,
main:has(.award),
.award-page main,
main:has(.past_results),
.past_results-page main,
main:has(.results),
.results-page main,
main:has(.results_content),
.results_content-page main,
main:has(.results_categories),
.results_categories-page main,
main:has(.results_categories_content),
.results_categories_content-page main,
main:has(.contact),
.contact-page main {
background-color: #EAEAEA;
margin-bottom: 0; /* フッターとの隙間を削除 */
padding-bottom: 0; /* フッターとの隙間を削除 */
}
/* フッターとの隙間を削除 */
main:has(.blog) + footer,
.blog-page main + footer,
main:has(.single-wrapper) + footer,
.single-wrapper-page main + footer,
main:has(.quality) + footer,
.quality-page main + footer,
main:has(.about) + footer,
.about-page main + footer,
main:has(.outline) + footer,
.outline-page main + footer,
main:has(.purification) + footer,
.purification-page main + footer,
main:has(.disaster-prevention) + footer,
.disaster-prevention-page main + footer,
main:has(.invoice) + footer,
.invoice-page main + footer,
main:has(.philosophy) + footer,
.philosophy-page main + footer,
main:has(.topics) + footer,
.topics-page main + footer,
main:has(.topics-single_content),
.topics-single_content-page main + footer,
main:has(.award),
.award-page main + footer,
main:has(.past_results),
.past_results-page main + footer,
main:has(.results),
.results-page main + footer,
main:has(.results_content),
.results_content-page main + footer,
main:has(.results_categories),
.results_categories-page main + footer,
main:has(.results_categories_content),
.results_categories_content-page main + footer,
main:has(.contact),
.contact-page main + footer {
margin-top: 0;
}
/* サブページのhtml要素に背景色を設定（footerの下の隙間を#3B4043で埋める） */
/* html:has(main:has(.blog)),
html:has(main:has(.quality)),
html:has(main:has(.outline)),
html:has(main:has(.company-about)),
html:has(main:has(.purification)),
html:has(main:has(.disaster-prevention)),
html:has(main:has(.invoice)),
html:has(main:has(.philosophy)) {
background-color: #3B4043;
} */
main:has(.blog),
.blog-page main,
main:has(.single-wrapper),
.single-wrapper-page main,
main:has(.outline),
.outline-page main,
main:has(.company-about),
.company-about-page main,
main:has(.quality),
.quality-page main,
main:has(.purification),
.purification-page main,
main:has(.disaster-prevention),
.disaster-prevention-page main,
main:has(.invoice),
.invoice-page main,
main:has(.philosophy),
.philosophy-page main,
main:has(.topics),
.topics-page main,
main:has(.topics-single_content),
.topics-single_content-page main,
main:has(.award),
.award-page main,
main:has(.past_results),
.past_results-page main,
main:has(.results_content),
.results_content-page main,
main:has(.results_categories_content),
.results_categories_content-page main,
main:has(.contact),
.contact-page main {
background-color: #EAEAEA;
margin-bottom: 0;
padding-bottom: 0;
position: relative; /* 追加 */
z-index: 1; /* 追加 */
}
.blog .wrapper,
.quality .wrapper,
.outline .wrapper,
.company-about .wrapper,
.philosophy .wrapper,
.purification .wrapper,
.disaster-prevention .wrapper,
.invoice .wrapper,
.topics .wrapper,
.topics-single_content .wrapper,
.award_content .wrapper,
.past_results_content .wrapper,
.results_content .wrapper,
.results_categories_content .wrapper,
.contact .wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px 30px;
}
.quality,
.blog,
.philosophy,
.outline,
.company-about,
.purification,
.disaster-prevention,
.invoice,
.topics,
.topics-single_content,
.award_content,
.past_results_content,
.results_categories_content,
.contact .wrapper {
position: relative;
margin-top: -200px; /* main_headerの上に重ねる */
margin-bottom: 0; /* フッターとの隙間を削除 */
z-index: 10;
background: #fff; /* 背景色を設定 */
padding-top: 20px; /* 上部に余白を追加 */
padding-bottom: 0; /* フッターとの隙間を削除 */
max-width: 1100px; /* 最大幅を1100pxに設定 */
margin-left: auto;
margin-right: auto;
width: calc(100% - 40px); /* 左右に20pxずつ余白を確保 */
/* padding-left: 20px;
padding-right: 20px; */
}
.results_content {
position: relative;
margin-top: -200px; /* main_headerの上に重ねる */
margin-bottom: 0; /* フッターとの隙間を削除 */
z-index: 10;
background: #fff; /* 背景色を設定 */
padding-top: 20px; /* 上部に余白を追加 */
padding-bottom: 0; /* フッターとの隙間を削除 */
max-width: 1100px; /* 最大幅を1100pxに設定 */
margin-left: auto;
margin-right: auto;
width: calc(100% - 40px); /* 左右に20pxずつ余白を確保 */
}
/* 各ページのh1 */
.blog #page-content {
float: none;
width: 100%;
}
.blog #topicpath {
width: 100%;
margin: 0 0 20px;
}
.main_header {
width: 100%;
height: 400px;
object-fit: cover;
position: relative;
}
.main_header img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top; /* ←画像の上を基準に配置 */
}
/* 黒の半透明オーバーレイ */
.main_header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35); /* ← 透明度を調整（0.1〜0.5くらい） */
z-index: 2;
}
/* blog-article */
.new_blog_contents p {
text-align: center;
padding-bottom: 20px;
}
.podcast-episode {
background: #ffffff;
border: 1px solid #eee;
border-radius: 18px;
padding: 28px;
margin-bottom: 40px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.podcast-episode:hover {
transform: translateY(-3px);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.episode-inner {
display: flex;
align-items: flex-start;
gap: 28px;
}
/* 左側：サムネイル */
.episode-image img {
width: 180px;
height: 180px;
border-radius: 16px;
object-fit: cover;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* 右側：本文エリア */
.episode-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* single.php（個別記事ページ）で画像がない場合、本文の横幅を広げる */
.single-wrapper .episode-inner {
gap: 0; /* 画像がないのでgapを0に */
}
.single-wrapper .episode-content {
width: 100%;
max-width: 100%; /* 横幅を最大限に広げる */
}
.episode-content h2 {
font-size: 1.4em;
font-weight: 700;
color: #111;
margin-bottom: 14px;
letter-spacing: 0.02em;
text-align: left;
}
.episode-content h2 a {
text-decoration: none;
color: inherit;
}
.episode-content h2 a:hover {
color: #6b4eff;
}
/* 音声プレイヤー */
.episode-content audio {
width: 100%;
margin-bottom: 16px;
border-radius: 12px;
background: #f8f8f8;
outline: none;
}
/* エピソードの概要（抜粋） */
.episode-content .excerpt {
color: #444;
line-height: 1.7;
margin-bottom: 18px;
text-align: left;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: visible; /* テキストが折り返されるように */
}
/* 記事内テーブル（会話表など） */
.episode-content .excerpt table,
.episode-content table,
.excerpt table,
.entry-content table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
margin: 0;
text-align: left;
display: table;
table-layout: fixed; /* セル幅を内容に応じて調整（折り返しを確実に） */
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
overflow-x: visible; /* テキストが折り返されるように */
}
.episode-content .excerpt tr {
display: table-row;
}
.episode-content .excerpt td,
.entry-content td {
display: table-cell;
padding: 4px 8px;
vertical-align: top;
text-align: left;
word-break: break-word; /* 折返し制御 */
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal; /* 折り返しを許可 */
max-width: 100%;
min-width: 0; /* セルが縮小できるように */
box-sizing: border-box;
overflow: visible; /* テキストが折り返されるように */
}
/* インラインスタイルのwidth: 100%を上書きして折り返しを確実に */
.episode-content .excerpt td[style*="width: 100%"],
.entry-content td[style*="width: 100%"] {
width: auto !important;
max-width: 100% !important;
}
/* 1列目（話者ラベル）を強調 */
.episode-content .excerpt td:first-child {
font-weight: 700;
white-space: nowrap;
width: auto; /* 固定幅 → 自動 */
min-width: 3em; /* 最小幅は確保 */
}
/* 2列目（内容）は残りスペースを使用 */
.episode-content .excerpt td:last-child {
width: auto;
}
/* 一覧ページでは画像を非表示 */
.episode-content .excerpt img {
display: none;
}
/* 投稿日・カテゴリー */
.episode-meta {
font-size: 0.9em;
color: #888;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.episode-meta span {
margin-right: 18px;
}
/* モバイル対応 */
/* 本文の改行制御（日本語優先 / 長い英単語のみ折返し） */
.episode-content .excerpt,
.episode-content .excerpt p,
.episode-content .excerpt li {
word-break: normal;
overflow-wrap: break-word;
line-break: strict;
}
.episode-content h2,
.episode-content h2 a,
.episode-meta {
word-break: normal;
overflow-wrap: break-word;
}
/* ページネーション（WP-PageNavi 完全円デザイン版） */
.pagenavi {
text-align: center;
margin: 0;
padding: 40px 0 60px;
}
.pagenavi a,
.pagenavi span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0 5px;
border-radius: 4px;
border: 1px solid #888;
color: #047649;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
vertical-align: middle;
}
.pagenavi a:hover {
background-color: #047649;
color: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pagenavi span.current {
background-color: #047649;
color: #fff;
border-color: #047649;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* テキストボタン（「最初」「最後」など）のスタイル */
.pagenavi a[rel="prev"],
.pagenavi a[rel="next"],
.pagenavi .pages,
.pagenavi .extend {
width: auto;
min-width: 60px;
padding: 0 12px;
white-space: nowrap;
}
/* 「先頭」「最後」ボタン専用のスタイル（より横幅を広く） */
.pagenavi a.first,
.pagenavi a.last {
min-width: 80px;
padding: 0 15px;
}
/* レスポンシブ対応 */
/* single.php 個別記事の本文幅調整（レスポンシブ対応） */
#contents {
max-width: 1100px; /* ページ全体の最大幅 */
margin: 0 auto; /* ページ中央寄せ */
padding: 0 20px; /* 左右余白 */
}
#page-content {
width: 100%;
max-width: 800px; /* 記事本文の最大幅 */
margin: 0 auto; /* 中央寄せ */
}
.entry-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: visible; /* テキストが折り返されるように */
}
.entry-content img,
.entry-content table {
max-width: 100%; /* 画像や表がはみ出さないように */
height: auto;
}
/* 前後記事リンク */
.prev-next-content {
max-width: 800px; /* 本文と同じ幅 */
margin: 40px auto 60px; /* 下に余白を追加 */
display: flex;
justify-content: space-between;
gap: 20px;
}
.prev-next-content .btn a {
display: inline-block;
padding: 10px 20px;
background-color: #047649;
color: #fff;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
.prev-next-content .btn a:hover {
background-color: #035d3d;
}
/* single.php（個別記事ページ）の背景デザインをblog.phpと同じにする */
.single-wrapper {
position: relative;
margin-top: -200px; /* main_headerの上に重ねる */
margin-bottom: 0;
z-index: 10;
background: #fff; /* 背景色を設定 */
padding-top: 20px; /* 上部に余白を追加 */
padding-bottom: 0;
max-width: 1100px; /* 最大幅を1100pxに設定 */
margin-left: auto;
margin-right: auto;
width: calc(100% - 40px); /* 左右に20pxずつ余白を確保 */
}
.single-wrapper #contents {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 30px;
}
.single-wrapper #page-content {
float: none;
width: 100%;
}
.single-wrapper #topicpath {
width: 100%;
margin: 0 0 20px;
}
/* single.php（個別記事ページ）で記事の枠を中央寄せ */
.single-wrapper .podcast-episode {
max-width: 1000px; /* 記事の最大幅を設定 */
margin: 0 auto; /* 中央寄せ */
width: 100%;
}
/* レスポンシブ対応 */
/* single.php 個別記事でテーブル内の画像を表示 */
.single-wrapper .episode-content .excerpt img {
display: block; /* または inline-block */
max-width: 100%;
height: auto;
}
/* スマホ対応：横幅調整、テーブルと画像を画面いっぱいに表示 */
/* philosophyページ */
.ceo .wrapper {
max-width: 1100px;
margin: 0 auto;
}
.ceo h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.ceo h1::before {
content: "Message";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
/* .ceo_message_img::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 60px;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center;
background-size: cover;
pointer-events: none;
z-index: 2;
} */
/* PC用：viewBox 1920 */
.ceo_message_img::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center;
background-size: cover;
pointer-events: none;
z-index: 2;
}
.ceo_message_img {
position: relative;
width: calc(100% + 80px);
max-width: 100vw;
margin-left: -40px;
margin-right: -40px;
height: 650px;
overflow: hidden;
box-sizing: border-box;
}
/* 画像を内側でクリップ（はみ出し防止） */
.ceo_message_img_inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.ceo_message_img_inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
vertical-align: top;
}
.ceo_message_img img {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ceo_message_text {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 40px 0 0;
}
.ceo_message_text .ceo_name {
font-size: 1rem;
font-weight: 600;
margin-bottom: 40px;
line-height: 1.5;
color: #515151;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.ceo_message_text h2 {
font-size: 1.9rem;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #515151;
line-height: 1.7;
margin-bottom: 20px;
font-feature-settings: "palt";
}
.ceo_message_text p {
font-size: 1rem;
letter-spacing: 0.05rem;
line-height: 2;
margin: 0 auto 50px;
text-align: justify;
color: #515151;
}
/* TB（768px以下）：画像高さを450pxに、波線のSVGを768幅用に調整 */
/* スマホ（480px以下）：画像の下を基準に、その直下に波線を配置。波線のSVGを480幅用に調整 */
.slogan h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.slogan h1::before {
content: "Philosophy";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.slogan_text {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
text-align: center;
}
.slogan_text h4 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 20px;
letter-spacing: 0.2rem;
line-height: 1.5;
color: #515151;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.slogan_text h4 b {
font-weight: 600;
color: #047649;
}
/* 社是 */
.motto h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.motto h1::before {
content: "〜心を建てる〜";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.motto_text {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 0 40px;
text-align: center;
}
.motto_text p {
font-size: 1rem;
letter-spacing: 0.05rem;
line-height: 2;
margin: 0 auto 50px;
text-align: justify;
color: #515151;
font-feature-settings: "palt";
}
.motto_text p b {
font-weight: 600;
color: #047649;
}
/* 沿革ページ */
.outline_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.outline_content h1::before {
content: "Outline";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.history-jmc {
max-width: 800px;
margin: 60px auto 40px auto;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.history-jmc-list {
list-style: none;
margin: 0;
padding: 0;
}
.history-jmc-list li {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #e3e9e8;
padding: 38px 0 26px 0;
position: relative;
background: transparent;
}
.history-jmc-list li:last-child {
border-bottom: none;
}
.hjl-year {
width: 170px;
min-width: 100px;
max-width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
padding-right: 35px;
font-weight: 400;
font-size: 1.5rem;
color: #047649;
letter-spacing: .06em;
}
.hjl-era {
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
font-size: 1.3rem;
}
.hjl-en {
text-align: right;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
color: #888;
font-size: 1rem;
letter-spacing: .03em;
margin-top: 2px;
font-weight: 500;
}
.hjl-content {
flex: 1 1 0%;
font-size: 1rem;
color: #515151;
line-height: 2.1;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
letter-spacing: 0.03em;
padding-top: 2px;
word-break: break-word;
text-align: left;
}
.history-jmc-list li:first-child .hjl-year,
.history-jmc-list li:first-child .hjl-content {
color: #084d37;
font-weight: 600;
}
.next_stage h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
font-feature-settings: "palt";
}
.next_stage h1::before {
content: "95th Next Stage";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.next_stage_text {
width: 80%;
margin: 0 auto;
padding: 0 0 40px;
text-align: center;
}
.next_stage_text h2 {
font-size: 1.9rem;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #515151;
line-height: 1.7;
text-align: left;
margin-bottom: 20px;
font-feature-settings: "palt";
}
.next_stage_text p {
font-size: 1rem;
letter-spacing: 0.05rem;
line-height: 2;
margin: 0 auto 50px;
text-align: left;
color: #515151;
font-feature-settings: "palt";
}
/* 会社概要ページ */
.about_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.about_content h1::before {
content: "About";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.company-outline {
max-width: 800px;
margin: 60px auto 40px auto;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.company-summary {
max-width: 800px;
margin: 60px auto 40px auto;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.company-summary-list {
list-style: none;
padding: 0;
margin: 0;
}
.company-summary-list li {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #e5e5e5;
padding: 18px 0;
font-size: 1.1em;
}
.company-summary-label {
width: 160px;
min-width: 110px;
font-weight: 400;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #047649;
font-size: 1rem;
letter-spacing: 0.07em;
word-break: keep-all;
padding-right: 25px;
line-height: 1.5;
box-sizing: border-box;
}
.company-summary-value {
flex: 1;
color: #515151;
line-height: 1.7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 1rem;
word-break: break-word;
}
.company-summary-table-wrap {
overflow-x: auto;
}
.company-summary-table {
min-width: 440px;
border-collapse: collapse;
width: 100%;
margin: 5px 0 0 0;
background: #fff;
}
.company-summary-table th,
.company-summary-table td {
border: 1px solid #ddd;
padding: 4px 10px;
}
.company-summary-table th {
background: #f8f8f8;
font-weight: bold;
text-align: left;
}
.company-summary-table td {
text-align: right;
}
.business_items h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.business_items h1::before {
content: "Business Items";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.business-summary {
max-width: 800px;
margin: 60px auto 40px auto;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.business-summary-list {
list-style: none;
padding: 0;
margin: 0;
}
.business-summary-list li {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #e5e5e5;
padding: 18px 0;
font-size: 1.1em;
}
.business-summary-label {
width: 160px;
min-width: 110px;
font-weight: 400;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #047649;
font-size: 1rem;
letter-spacing: 0.07em;
word-break: keep-all;
padding-right: 25px;
line-height: 1.5;
box-sizing: border-box;
}
.business-summary-value {
flex: 1;
color: #515151;
line-height: 1.7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 1rem;
word-break: break-word;
}
.business-summary-details {
display: block;
font-size: 0.97em;
color: #6a7b75;
margin-top: 2px;
margin-bottom: 2px;
line-height: 1.7;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
/* officer */
.officer h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.officer h1::before {
content: "Officer";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.officer-summary {
margin: 60px auto 30px auto;
max-width: 760px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.officer-section-title {
font-size: 1.5em;
font-weight: 500;
color: #047649;
border-left: 4px solid #047649;
padding-left: 18px;
margin-bottom: 18px;
margin-top: 40px;
letter-spacing: 0.06em;
line-height: 1.3;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.officer-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 22px;
background: #fff;
}
.officer-table th,
.officer-table td {
padding: 15px 16px;
font-size: 1.07em;
}
.officer-table th {
background: #e7f4ef;
color: #047649;
text-align: left;
font-weight: 500;
width: 300px;
border-bottom: 1px solid #dfe7e3;
border-right: 1px solid #cbe3d8;
letter-spacing: 0.03em;
font-size: 1rem;
}
.officer-table td {
background: #fafcfa;
color: #515151;
border-bottom: 1px solid #eaeaea;
text-align: left;
letter-spacing: 0.02em;
font-size: 1rem;
}
/* スマホ用オフィサー表の追加調整 */
/* 組織図 */
.chart h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.chart h1::before {
content: "Organization chart";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.chart img {
width: 60%;
height: auto;
object-fit: cover;
display: block;
margin: 0 auto;
}
.office h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.office h1::before {
content: "Organization chart";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.offices-list-vertical {
max-width: 720px;
margin: 0 auto 54px auto;
padding: 0 2vw;
display: flex;
flex-direction: column;
gap: 56px;
font-family: 'Yu Gothic', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
}
.office-block-vertical {
background: #fff;
border-radius: 17px;
box-shadow: 0 1.5px 18px #dbe4e818;
border: 1px solid #e7ecef;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 46px 32px 36px 32px;
gap: 30px;
transition: box-shadow .16s;
position: relative;
}
.office-block-vertical:hover {
box-shadow: 0 8px 32px #d3eadc51;
border-color: #d4dadb;
}
.office-title {
color: #222;
font-weight: 600;
font-size: 1.47em;
letter-spacing: .05em;
font-family: "Yu Mincho", "游明朝体", "YuMincho", serif;
margin-bottom: 0;
position: relative;
}
.office-title::after {
content: "";
display: block;
width: 44px;
height: 4px;
background: #047649;
border-radius: 2px;
margin: 13px auto 0 auto;
}
.office-addrbox {
font-size: 1.09em;
color: #515151;
border-radius: 6px;
padding: 13px 12px 9px 12px;
margin-bottom: 2px;
line-height: 2.05;
font-family: "游明朝体","Yu Mincho", "YuMincho",serif;
letter-spacing: 0.03em;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.office-img-holder {
margin: 0 0 0 0;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
max-width: 90vw;
min-height: 200px;
box-sizing: border-box;
}
.office-img-holder img {
width: 205px;
max-width: 100%;
min-height: 290px;
max-height: 420px;
object-fit: cover;
aspect-ratio: 2 / 3;
border-radius: 17px;
border: 1px solid #f0f0f0;
background: #f6f8f9;
box-shadow: 0 2px 17px #dde4ea13;
margin: auto;
transition: filter .15s, box-shadow .15s;
display: block;
}
.office-block-vertical:hover .office-img-holder img {
filter: brightness(1.05);
box-shadow: 0 7px 36px #c7daf387;
}
.office-map-holder {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
}
.office-map-holder iframe {
width: 98%;
min-width: 350px;
max-width: 560px;
height: 340px;
border: none;
border-radius: 14px;
background: #ededed;
box-shadow: 0 2px 16px #edf1ec2c;
margin: 0 auto;
display: block;
}
.office-block-vertical:hover .office-map-holder iframe {
box-shadow: 0 10px 44px #b8e1c870;
}
.office-green-hr {
width: 80%;
max-width: 430px;
min-width: 88px;
margin: 38px auto 0 auto;
border: none;
border-top: 3px solid #047649;
height: 0;
background: transparent;
border-radius: 3px;
}
/* 品質保証 */
.quality h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.quality h1::before {
content: "Quality";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.quality-section {
margin: 40px 0 50px 0;
display: flex;
justify-content: center;
width: 100%;
}
.quality-grid {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
max-width: 800px;
}
.quality-card {
background: #fafafa;
border: 1.5px solid #d7e4da;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(4, 118, 73, 0.065);
padding: 34px 32px 24px 32px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
transition: box-shadow 0.2s;
box-sizing: border-box;
}
.quality-card:hover {
box-shadow: 0 8px 24px rgba(4, 118, 73, 0.13);
border-color: #b9d1c0;
}
.quality-card h2 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 12px;
color: #047649;
display: flex;
align-items: center;
gap: 9px;
line-height: 1.3;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.quality-card .year-badge {
font-size: 0.85em;
color: #555;
font-weight: 400;
background: #eaeaea;
border-radius: 7px;
padding: 1px 8px;
margin-left: 3px;
}
.quality-card p {
font-size: 1em;
color: #444;
margin-bottom: 13px;
}
.quality-card .date-label {
font-size: 0.99em;
color: #888;
margin-right: 8px;
}
.quality-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
}
.quality-links li a {
display: inline-block;
padding: 7px;
color: #047649;
font-size: 0.98em;
border-radius: 5px;
transition: background 0.18s, color 0.18s;
}
.quality-links li a:hover {
color: #fff;
background: #047649;
text-decoration: none;
}
/* 土壌汚染浄化 */
.purification_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.purification_content h1::before {
content: "Purification";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.purification_content_text {
width: 80%;
margin: 0 auto;
padding: 0 0 40px;
text-align: center;
}
.purification_content_text p {
font-size: 1rem;
letter-spacing: 0.05rem;
line-height: 2;
margin: 0 auto 50px;
text-align: left;
color: #515151;
}
.purification_content_text img {
width: 100%;
}
/* 地域防災 */
.disaster-prevention_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.disaster-prevention_content h1::before {
content: "Disaster-prevention";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
/* 災害横型カード .quality.html風・画像右寄せアレンジ */
.disaster-section {
margin: 0 auto 30px;
max-width: 1000px;
width: 100%;
}
.disaster-section .quality-row-grid {
display: flex;
flex-direction: column;
gap: 37px;
margin: 22px 0 33px 0;
width: 100%;
}
.disaster-section .quality-row-card {
display: flex;
flex-direction: row-reverse; /* 画像右側配置 */
gap: 34px;
align-items: flex-start;
background: #fff;
border-radius: 13px;
box-shadow: 0 4.5px 17px 0 rgba(21,160,108,.08), 0 1px 4px 0 rgba(4,118,73,.11);
padding: 37px 44px 37px 37px;
position: relative;
border: 1.5px solid #e1ede6;
transition: box-shadow 0.18s, border 0.18s;
min-height: 190px;
}
.disaster-section .quality-row-card:hover {
box-shadow: 0 8px 28px 0 rgba(21,160,108,.13), 0 2px 9px 0 rgba(4,118,73,.16);
border-color: #bae7d4;
}
.disaster-section .quality-row-card .img-side {
flex: 0 0 330px;
min-width: 245px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 18px;
}
.disaster-section .quality-row-card .img-side img {
max-width: 340px;
width: 100%;
height: auto;
border-radius: 14px;
object-fit: cover;
margin-bottom: 4px;
background: #f3faf6;
border: 1.5px solid #dbf3ea;
box-shadow: 0 1.8px 16px 0 rgba(76,196,154,0.17);
}
/* 感謝状や表彰画像は更に大きく */
.disaster-section .quality-row-card .img-large {
max-width: 415px !important;
border-radius: 17px;
box-shadow: 0 3px 38px 0 rgba(76,196,154,0.17), 0 1px 8px 0 rgba(21,160,108,.16);
}
.disaster-section .quality-row-card .img-side .award {
display: inline-block;
background: #fcf5db;
border-left: 6.5px solid #ffd966;
color: #a17d00;
font-weight: 600;
font-size: 1em;
border-radius: 0 9px 9px 0;
padding: 4px 16px 4px 13px;
margin: 0 0 2.5px 0;
box-shadow: 0 1px 7px 0 rgba(239,214,54,.08);
}
.disaster-section .quality-row-card .content-side {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---- card-label, シンプルver ---- */
.disaster-section .quality-row-card .card-label {
display: inline-block;
font-size: 1em;
color: #15a06c;
padding: 3.5px 14px;
border-radius: 8px;
font-weight: 600;
letter-spacing: .12em;
margin-bottom: 15px;
background: #effaf5;
border: 1.2px solid #bae7d4;
box-shadow: none;
position: relative;
line-height: 1.35;
}
/* カラーアレンジ（用途別） */
.disaster-section .card-label.label-volunteer { color: #15a06c; border-color:#bae7d4; background:#effaf5;}
.disaster-section .card-label.label-workplace { color: #6453b7; border-color:#d1cef5; background:#f7f6fd;}
.disaster-section .card-label.label-environment { color: #e28712; border-color:#f7dcad; background:#fff9ef;}
.disaster-section .card-label.label-bousai { color: #17b2e0; border-color:#ace4f8; background:#f4fcff;}
.disaster-section .card-label.label-award { color: #e55274; border-color:#f8cadd; background:#fdf3f7;}
.disaster-section .card-label.label-woman { color: #c285e5; border-color:#efd3f9; background:#f8f4fd;}
.disaster-section .card-label.label-commend { color: #3051b0; border-color:#b6c6ec; background:#f5f7fc;}
.disaster-section .card-label small {
font-size: .93em;
color: #999;
margin-left: 9px;
font-weight: 400;
}
.disaster-section .quality-row-card h3 {
color: #047649;
font-weight: 700;
font-size: 1.35em;
letter-spacing: 0.06em;
margin: 0 0 7px 0;
line-height: 1.35;
padding-left: 15px;
padding-top: 2px;
border-left: 5px solid #13b27c;
background: none;
}
.disaster-section .quality-row-card p {
font-size: 1.12em;
line-height: 2.1;
color: #434343;
margin-bottom: 7px;
margin-top: 3px;
letter-spacing: 0.03em;
}
.disaster-section .quality-row-card .meta {
font-size: .96em;
color: #888;
margin-top: 8px;
margin-bottom: 0;
}
.disaster-section .quality-row-card .links {
margin: 18px 0 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 19px 22px;
}
.disaster-section .quality-row-card .links li {
list-style: none;
}
.disaster-section .quality-row-card .links a {
display: inline-flex;
align-items: center;
padding: 7.5px 28px 7.5px 16px;
color: #047649;
border: 2px solid #15a06c;
border-radius: 50px;
text-decoration: none;
font-size: 1.01em;
font-weight: 600;
background: #f9fffc;
transition: background 0.15s, color 0.15s, border 0.15s;
}
.disaster-section .quality-row-card .links a:hover {
background: #047649;
color: #fff;
border-color: #047649;
}
.disaster-section .quality-row-card .links a::after {
content: '';
display: inline-block;
margin-left: 9px;
width: 10px; height: 9px;
border: solid currentColor;
border-width: 0 2.5px 2.5px 0;
transform: rotate(-45deg);
transition: border 0.15s;
}
/* Tablet (768px) */
/* SP (480px) - 画像下部になるように修正 */
/* 指定請求書 */
.invoice_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.invoice_content h1::before {
content: "invoice";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
/* --- 請求書案内 --- */
.invoice-guide-wrap,
.invoice-section-block {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.invoice-guide {
background: #f8faf8;
border-radius: 13px;
border: 1.7px solid #e5ede8;
box-shadow: 0 1.5px 11px 0 rgba(21,160,108,0.05);
padding: 30px 36px;
font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", sans-serif;
}
.invoice-guide ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: invnum;
}
.invoice-guide li {
counter-increment: invnum;
position: relative;
margin-bottom: 1.3em;
padding-left: 2.2em;
color: #173b30;
font-size: 1.03em;
line-height: 1.8;
}
.invoice-guide li:last-child {
margin-bottom: 0;
}
.invoice-guide li::before {
content: counter(invnum) ".";
position: absolute;
left: 0;
top: 0.01rem;
color: #13ac72;
font-size: 1.4rem;
font-weight: 600;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.invoice-guide strong,
.invoice-guide u {
color: #0a8f67;
font-weight: 600;
}
.invoice-guide u {
text-decoration: underline;
text-underline-offset: 2px;
}
.invoice-section-title {
font-size: 1.2rem;
color: #0d6247;
font-weight: 600;
border-left: 4px solid #13ac72;
margin: 34px 0 14px 0;
padding-left: 0.65em;
letter-spacing: 0.02em;
background: none;
}
.invoice-links {
display: flex;
gap: 14px;
margin: 0 0 18px 0;
flex-wrap: wrap;
}
.invoice-link-btn {
display: inline-flex;
align-items: center;
padding: 0.66em 1.55em 0.66em 1.05em;
border-radius: 22px;
background: #fff;
border: 1.2px solid #13ac72;
color: #0a8f67;
font-size: 1.04em;
font-weight: 500;
text-decoration: none;
box-shadow: 0 1px 5px 0 rgba(13,172,114,0.04);
transition: background 0.13s, color 0.13s, border 0.13s, box-shadow 0.13s;
}
.invoice-link-btn:hover,
.invoice-link-btn:focus {
background: #13ac72;
color: #fff;
border-color: #0a8f67;
box-shadow: 0 3px 18px 0 rgba(13,172,114,0.09);
}
.invoice-link-btn .icon {
display: inline-flex;
align-items: center;
margin-right: 9px;
font-size: 1.2em;
}
/* icon spacing for PDF (last icon if two buttons side by side) */
.invoice-link-btn:last-child .icon {
margin-right: 9px;
}
/* footer レスポンシブ */
/* Tablet (768px以下) */
/* メディア掲載 */
.media_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.media_content h1::before {
content: "media";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.media_content .wrapper {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.media_content_text {
display: flex;
flex-direction: column;
gap: 20px;
}
.media_content_text img {
max-width: 700px;
width: 100%;
height: auto;
border-radius: 20px;
margin: 60px auto 0;
}
.media_content_text .iju_logo {
max-width: 300px;
width: 100%;
height: auto;
margin: 30px auto;
}
.media_content_text .iju_logo img {
width: 100%;
height: auto;
}
.media_content_text p {
font-size: 1rem;
line-height: 1.7;
text-align: center;
font-weight: 400;
color: #515151;
width: 100%;
margin: 0 auto;
text-align: left;
max-width: 700px;
}
/* トピックス */
/* archive-topics.php 基本スタイル（blog.phpと同じ構造に合わせる） */
.topics #page-content {
float: none;
width: 100%;
}
.topics #topicpath {
width: 100%;
margin: 0 0 20px;
}
/* archive-topics.php のh1スタイル */
.topics .entry-content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 100px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
/* 下線を非表示にする */
.topics .entry-content h1::after {
display: none;
}
.topics .entry-content h1::before {
content: "Topics";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.topics_flex {
display: flex;
flex-direction: column; /* 縦に積む */
gap: 20px; /* アイテム間の間隔 */
align-items: center; /* 中央寄せにして最大幅を適用 */
}
.topics_under_item {
display: flex; /* day と text を横並び */
gap: 16px;
background: #fff;
padding: 14px;
border-radius: 6px;
width: 100%; /* 親の幅に合わせる */
max-width: 1000px; /* 最大幅を 800px に制限 */
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.topics_under_item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.topics_under_item .day {
flex: 0 0 20%; /* dayは固定幅 */
font-weight: 700;
color: #047649;
}
.topics_under_item .topics_text {
flex: 1;
}
.topics_under_item .topics_text p {
margin: 0;
border-left: 4px solid #047649;
padding-left: 30px;
text-align: left;
}
/* リンク色（ホバー） - 全体がリンクになったので不要だが、念のため残す */
.topics_under_item .topics_text a {
text-decoration: none;
transition: color .2s ease;
}
.topics_under_item .topics_text a:hover {
color: #047649;
}
.topics_single_content {
padding: 20px 40px 30px;
box-sizing: border-box; /* パディングを含めた幅計算 */
overflow: hidden; /* はみ出しを防ぐ */
width: 100%;
}
.topics_single_content h1 {
color: #000;
font-size: 1.6rem;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
font-feature-settings: 'palt';
}
.topics_single_content h1::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #047649;
margin: 10px auto 0;
}
.topics_single_content p {
font-size: 1rem;
line-height: 1.7;
text-align: left;
font-weight: 400;
color: #515151;
width: 100%;
margin: 0 auto;
max-width: 700px;
}
/* pタグ内の画像を中央寄せ */
.topics_single_content p img {
display: block;
margin: 30px auto;
max-width: 700px; /* 700pxを超える場合のみ制限 */
height: auto; /* アスペクト比を保持 */
}
/* 直接の画像（pタグ外）も中央寄せ */
.topics_single_content img {
max-width: 700px; /* 700pxを超える場合のみ制限 */
height: auto; /* アスペクト比を保持 */
display: block;
margin: 30px auto;
box-sizing: border-box;
}
/* figureタグやwp-caption内の画像にも対応 */
.topics_single_content figure img,
.topics_single_content .wp-caption img,
.topics_single_content figure.wp-caption img {
max-width: 700px; /* 700pxを超える場合のみ制限 */
height: auto;
display: block;
margin: 30px auto;
}
/* WordPressの画像アライメントクラスを上書き */
.topics_single_content .alignleft,
.topics_single_content .alignright,
.topics_single_content .aligncenter {
display: block;
margin: 30px auto;
float: none; /* floatを解除 */
max-width: 700px; /* 700pxを超える場合のみ制限 */
height: auto;
}
.topics_single_content .aligncenter {
margin: 30px auto;
}
.topics_single_content a {
color: #047649;
text-decoration: none;
transition: color .2s ease;
}
.topics_single_content a:hover {
text-decoration: underline;
}
/* レスポンシブ対応 */
/* 表彰工事 */
.award_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.award_content h1::before {
content: "Award work";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.award_list_content {
padding: 50px 0;
}
.award_list {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 40px;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.award_item {
background: #fff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.award_item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.award_item_header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #047649;
}
.award_item_header h2 {
font-size: 1.2rem;
font-weight: 600;
color: #000;
line-height: 1.6;
margin: 0;
}
.award_item_content {
display: flex;
gap: 30px;
align-items: flex-start;
}
.award_item_image {
flex: 0 0 300px;
}
.award_item_image img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
.award_item_info {
flex: 1;
}
.award_item_info p {
margin: 0 0 15px 0;
font-size: 0.95rem;
line-height: 1.8;
color: #515151;
}
.award_item_info strong {
color: #047649;
font-weight: 600;
}
/* タブレット対応（768px以下） */
/* スマートフォン対応（480px以下） */
/* 過去の実績 */
.past_results_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.past_results_content h1::before {
content: "Past results";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.pastlist {
margin: 40px 0 60px;
}
.pastlist .w33 {
display: flex;
flex-wrap: wrap;
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
.pastlist .w33 li {
margin: 0;
}
.pastlist .w33 li a {
display: block;
padding: 12px 24px;
background: #fff;
border: 1px solid #047649;
color: #047649;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
}
.pastlist .w33 li a:hover {
background: #047649;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(4, 118, 73, 0.2);
}
.past_results_list_content {
padding: 50px 0;
}
.past_results_list_content h2 {
font-size: 1.5rem;
font-weight: 600;
color: #000;
margin: 50px 0 30px;
padding-bottom: 15px;
border-bottom: 1px solid #047649;
}
.past_results_list_content h2:first-of-type {
margin-top: 0;
}
.past_results_list_content .pastbox {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.past_results_list_content .pastbox th {
background: #047649;
color: #fff;
padding: 15px 10px;
font-weight: 600;
text-align: center;
font-size: 0.95rem;
}
.past_results_list_content .pastbox td {
padding: 15px 10px;
border-bottom: 1px solid #e0e0e0;
font-size: 0.9rem;
line-height: 1.6;
vertical-align: top;
}
.past_results_list_content .pastbox tr:last-child td {
border-bottom: none;
}
.past_results_list_content .pastbox tr:hover {
background: #f5f5f5;
}
.past_results_list_content .pastbox01 {
width: 50%;
}
.past_results_list_content .pastbox02 {
width: 20%;
}
.past_results_list_content .pastbox03 {
width: 30%;
}
.past_results_list_content .pagetop {
text-align: center;
margin: 40px 0 60px;
}
.past_results_list_content .pagetop a {
display: inline-block;
padding: 10px 20px;
background: #047649;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
}
.past_results_list_content .pagetop a:hover {
background: #035d3d;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(4, 118, 73, 0.3);
}
/* おしらせ（archive-topics.php）レスポンシブ対応 */
/* タブレット（768px以下） */
/* スマホ（480px以下） */
/* レスポンシブ対応 */
/* 施工事例（archive-results.php） */
.results {
margin: 0;
padding-bottom: 60px;
background-color: #EAEAEA;
}
.public-works-contents {
position: relative;
margin: 60px 0 30px 0;
height: 500px;
}
.public-works-contents:last-child {
margin-bottom: 60px;
}
.public-works-contents::after {
content: "";
display: table;
clear: both;
}
.public-works-image {
position: relative;
width: 60%;
float: left;
height: 500px;
overflow: hidden;
}
.public-works-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.public-works-text {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 50%;
background: #fff;
padding: 40px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
box-sizing: border-box;
}
.public-works-contents h2 {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #515151;
border-left: 4px solid #047649;
padding-left: 20px;
margin-bottom: 20px;
}
.public-works-contents h2 span {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #515151;
padding-right: 10px;
}
.public-works-contents h3 {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.05rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #515151;
margin-bottom: 20px;
}
.public-works-contents p {
font-size: 0.9rem;
letter-spacing: 0.05rem;
line-height: 1.7;
color: #515151;
font-weight: 400;
margin-bottom: 20px;
text-align: left;
}
/* 逆レイアウト（右に画像、左にテキスト） */
.public-works-contents-reverse .public-works-image {
float: right;
}
.public-works-contents-reverse .public-works-text {
left: 0;
right: auto;
}
/* WOW.jsアニメーション適用時も垂直中央揃えを保持するカスタムアニメーション */
@keyframes fadeInLeftWithCenter {
from {
opacity: 0;
transform: translate3d(-100%, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
}
@keyframes fadeInRightWithCenter {
from {
opacity: 0;
transform: translate3d(100%, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
}
.public-works-text.wow.fadeInLeft {
animation-name: fadeInLeftWithCenter;
}
.public-works-text.wow.fadeInRight {
animation-name: fadeInRightWithCenter;
}
/* タブレット・SP表示時はアニメーションを無効化（画面スケール変更を防ぐ） */
/* public-works-contents レスポンシブ対応 */
/* 表彰工事・過去の実績バナー */
.results-link-banners {
display: flex;
gap: 30px;
margin: 60px 0;
justify-content: center;
}
.results-link-banner {
flex: 1;
max-width: 48%;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.results-link-banner:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.results-link-banner a {
display: block;
text-decoration: none;
color: #fff;
position: relative;
height: 200px;
overflow: hidden;
}
.results-link-banner .banner-image {
width: 100%;
height: 100%;
position: relative;
}
.results-link-banner .banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.results-link-banner:hover .banner-image img {
transform: scale(1.1);
}
.results-link-banner .banner-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
padding: 30px 20px 20px;
color: #fff;
}
.results-link-banner .banner-overlay h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 8px 0;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
letter-spacing: 0.1rem;
}
.results-link-banner .banner-overlay p {
font-size: 0.9rem;
margin: 0;
opacity: 0.9;
letter-spacing: 0.05rem;
}
/* タブレット・SP表示時はバナーのアニメーションを無効化（画面スケール変更を防ぐ） */
/* バナーのレスポンシブ対応 */
/* カテゴリーページ（taxonomy-categories.php） */
.results_categories {
margin: 0;
padding-bottom: 60px;
background-color: #EAEAEA;
}
.results_content #topicpath,
.results_categories_content #topicpath {
width: 100%;
margin: 0 0 20px;
padding: 12px 0;
font-size: 0.8em;
line-height: 1.4em;
position: relative;
z-index: 20;
text-align: left;
display: block;
}
.results_content h1,
.results_categories_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 100px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.results_content h1::before {
content: "Results";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
.results_categories_content h1::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #047649;
margin: 10px auto 0;
}
/* メインカテゴリー（土木・建築） */
.results_main_categories {
display: flex;
gap: 30px;
margin-bottom: 60px;
justify-content: center;
flex-wrap: wrap;
}
.main_category_item {
flex: 1;
min-width: 300px;
max-width: 400px;
background: #fff;
padding: 60px 40px;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
display: block;
color: inherit;
}
.main_category_item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.main_category_item h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 15px;
color: #047649;
transition: color 0.3s ease;
}
.main_category_item:hover h2 {
color: #035a3a;
}
.main_category_item .category_count {
font-size: 1.3rem;
color: #666;
margin: 0;
transition: color 0.3s ease;
}
.main_category_item:hover .category_count {
color: #047649;
}
/* カテゴリーボタン */
.results_category_buttons,
.results_categories_category_buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 0;
justify-content: center;
}
.category_btn {
padding: 10px 20px;
background: #fff;
border: 1px solid #047649;
border-radius: 25px;
color: #047649;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
text-decoration: none;
display: inline-block;
}
.category_btn:hover {
background: #047649;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(4, 118, 73, 0.3);
}
.results_flex {
display: flex;
flex-direction: column; /* 縦に積む */
gap: 20px; /* アイテム間の間隔 */
align-items: center; /* 中央寄せにして最大幅を適用 */
}
.results_under_item {
display: flex; /* day と text を横並び */
gap: 16px;
background: #fff;
padding: 14px;
border-radius: 6px;
width: 100%; /* 親の幅に合わせる */
max-width: 1000px; /* 最大幅を 1000px に制限 */
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.results_under_item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.results_under_item .day {
flex: 0 0 20%; /* dayは固定幅 */
font-weight: 700;
color: #047649;
}
.results_under_item .results_text {
flex: 1;
}
.results_under_item .results_text p {
margin: 0;
border-left: 4px solid #047649;
padding-left: 30px;
text-align: left;
}
/* リンク色（ホバー） - 全体がリンクになったので不要だが、念のため残す */
.results_under_item .results_text a {
text-decoration: none;
transition: color .2s ease;
}
.results_under_item .results_text a:hover {
color: #047649;
}
/* taxonomy-categories.php用のスタイル */
.results_content .result-block,
.results_categories_content .result-block {
margin-bottom: 40px;
padding: 20px;
background: #f8f8f8;
border-radius: 6px;
}
.results_content .result-block h2,
.results_categories_content .result-block h2 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 15px;
color: #000;
}
.results_content .result-block .meta,
.results_categories_content .result-block .meta {
font-size: 0.95rem;
color: #666;
margin-bottom: 10px;
line-height: 1.6;
}
.results_content .result-block .meta span,
.results_categories_content .result-block .meta span {
font-weight: 600;
color: #047649;
}
.results_content .result-block .meta .category-links,
.results_categories_content .result-block .meta .category-links {
font-weight: normal;
}
.results_content .result-block .meta .category-links a,
.results_categories_content .result-block .meta .category-links a {
color: #047649;
text-decoration: none;
transition: color 0.3s ease;
border-bottom: 1px solid transparent;
}
.results_content .result-block .meta .category-links a:hover,
.results_categories_content .result-block .meta .category-links a:hover {
color: #035a3a;
border-bottom-color: #035a3a;
}
.results_content .result-block .img,
.results_categories_content .result-block .img {
background: none;
margin: 20px 0 0;
padding: 0;
list-style: none;
display: flex;
gap: 20px;
flex-wrap: nowrap;
justify-content: flex-start;
}
.results_content .result-block .img li,
.results_categories_content .result-block .img li {
margin: 0;
padding: 0;
border: none;
text-indent: 0;
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
}
.results_content .result-block .img li img,
.results_categories_content .result-block .img li img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
/* 施工事例（archive-results.php）レスポンシブ対応 */
/* コンタクト */
.contact #topicpath {
width: 100%;
margin: 0 0 20px;
padding: 12px 0;
font-size: 0.8em;
line-height: 1.4em;
position: relative;
z-index: 20;
text-align: left;
display: block;
}
.contact_content h1 {
color: #000;
font-size: 2.2em;
text-align: center;
font-weight: 600;
padding: 40px 0 45px;
letter-spacing: 0.2rem;
line-height: 1.5;
font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
margin-bottom: 30px;
}
.contact_content h1::before {
content: "Contact";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-style: italic;
font-size: 1rem;
color: #047649;
white-space: nowrap;
}
/* ========== レスポンシブ（メディアクエリまとめ） ========== */
@media screen and (max-width: 1024px) {
.public-works-text.wow.fadeInLeft,
.public-works-text.wow.fadeInRight,
.public-works-image.wow.fadeInLeft,
.public-works-image.wow.fadeInRight {
animation-name: none !important; /* アニメーションを無効化 */
opacity: 1 !important; /* 常に表示 */
}
.public-works-image {
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.public-works-text {
transform: translateY(-50%) !important; /* PC表示時のtransformを維持 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.public-works-contents-reverse .public-works-image {
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.public-works-contents-reverse .public-works-text {
transform: translateY(-50%) !important; /* PC表示時のtransformを維持 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.results-link-banner.wow.fadeInLeft,
.results-link-banner.wow.fadeInRight {
animation-name: none !important; /* アニメーションを無効化 */
opacity: 1 !important; /* 常に表示 */
}
.results-link-banner {
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.results-link-banners {
overflow: hidden; /* はみ出しを防ぐ */
}
}
@media screen and (max-width: 979px) {
.history-jmc { max-width: 98vw;}
.hjl-year { width: 128px; font-size: 0.95em; padding-right: 17px; }
.hjl-content { font-size: 1em; }
}
@media screen and (max-width: 900px) {
.office-img-holder {
width: 32vw;
min-width: 120px;
max-width: 50vw;
min-height: 120px;
}
.office-img-holder img {
width: 22vw;
min-width: 100px;
min-height: 160px;
max-width: 220px;
aspect-ratio: 2 / 3;
}
.office-map-holder iframe {
width: 96vw;
min-width: 120px;
height: 210px;
}
.office-green-hr {
width: 93vw;
min-width: 51px;
margin-top: 19px;
}
.quality-grid {
max-width: 97vw;
}
.quality-section {
margin: 25px 0 28px 0;
}
.quality-card {
padding: 24px 8vw 14px 8vw;
}
.invoice-guide-wrap,
.invoice-section-block {max-width: 100%;}
}
@media screen and (max-width: 768px) {
/* h1 TBサイズ（指定がなかったもの） */
.ceo h1,
.slogan h1,
.motto h1,
.outline_content h1,
.next_stage h1,
.about_content h1,
.business_items h1,
.officer h1,
.chart h1,
.office h1,
.quality h1,
.purification_content h1,
.disaster-prevention_content h1,
.invoice_content h1,
.media_content h1,
.award_content h1,
.contact_content h1 {
font-size: 1.8rem;
}
.blog .wrapper,
#page-content,
.entry-content {
width: 100%;
max-width: 100%;
padding: 0;
box-sizing: border-box;
}
/* single.phpの本文エリアのパディングを調整 */
.single-wrapper #contents {
padding: 0 15px 20px; /* 左右のパディングを最小限に */
max-width: 100%;
}
.single-wrapper .entry-content {
padding: 0;
width: 100%;
}
/* テーブルを適切に表示（スクロールなし） */
.episode-content .excerpt,
.entry-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0;
clear: both;
overflow: visible;
float: none;
}
/* テーブル以外の要素（pタグなど）が適切に表示されるように */
.episode-content .excerpt p,
.entry-content p {
display: block;
margin: 0 0 15px 0;
clear: both;
position: relative;
}
/* テーブルの後の要素が適切に表示されるように */
.episode-content .excerpt table + p,
.entry-content table + p,
.episode-content .excerpt table + *,
.entry-content table + * {
margin-top: 20px;
clear: both;
display: block;
}
/* テーブルを縦並びに変更 */
.episode-content .excerpt table,
.entry-content table {
display: block !important; /* ブロック化して縦並びに（タブレットのスタイルを上書き） */
width: 100% !important; /* 横幅いっぱい */
height: auto !important; /* インラインスタイルの高さ指定を上書き */
border-collapse: collapse;
overflow-x: visible !important; /* 横スクロールを無効化 */
word-wrap: break-word; /* 長い単語を折り返し */
margin: 0 0 20px 0 !important; /* テーブルの下に余白を追加 */
clear: both !important; /* 重なりを防ぐ */
float: none !important;
}
.episode-content .excerpt tbody,
.entry-content tbody {
display: block !important; /* ブロック化（タブレットのスタイルを上書き） */
}
.episode-content .excerpt tr,
.entry-content tr {
display: block !important; /* ブロック化して縦並びに（タブレットのスタイルを上書き） */
width: 100%;
height: auto !important; /* インラインスタイルの高さ指定を上書き */
margin-bottom: 0;
border-bottom: 1px solid #e0e0e0;
padding: 12px 0;
clear: both; /* 重なりを防ぐ */
}
.episode-content .excerpt tr:last-child,
.entry-content tr:last-child {
border-bottom: none;
}
/* 画像のみを含む行（空のセルと画像セル）のスタイル調整 */
.episode-content .excerpt tr:has(td:empty):has(td img),
.entry-content tr:has(td:empty):has(td img) {
border-bottom: none;
padding: 0;
margin-bottom: 20px;
}
.episode-content .excerpt td,
.entry-content td {
display: block !important; /* ブロック化して縦並びに（タブレットのスタイルを上書き） */
width: 100% !important; /* インラインスタイルを上書き */
height: auto !important; /* インラインスタイルの高さ指定を上書き */
max-width: 100% !important;
line-height: 1.6;
padding: 6px 0;
word-break: break-word; /* 長い単語を折り返し */
overflow-wrap: break-word;
white-space: normal; /* 折り返しを許可 */
box-sizing: border-box;
}
/* 空のセルを非表示 */
.episode-content .excerpt td:empty,
.entry-content td:empty {
display: none !important;
padding: 0;
margin: 0;
height: 0;
}
/* 1列目（話者ラベル）のスタイル調整 - 空でない場合のみ */
.episode-content .excerpt td:first-child:not(:empty),
.entry-content td:first-child:not(:empty) {
font-weight: 700;
margin-bottom: 8px; /* 下に余白を追加して改行感を出す */
padding-bottom: 4px;
border-bottom: 1px solid #f0f0f0;
}
/* 2列目（内容）のスタイル調整 - 空でない場合のみ */
.episode-content .excerpt td:last-child:not(:empty),
.entry-content td:last-child:not(:empty) {
width: 100%;
max-width: 100%;
padding-top: 8px; /* 上に余白を追加 */
line-height: 1.8; /* 行間を広げて読みやすく */
}
/* 画像を含むセルのスタイル */
.episode-content .excerpt td img,
.entry-content td img {
width: 100% !important;
height: auto !important;
max-width: 100%;
display: block;
margin: 0 auto;
}
/* 画像を含むリンクのスタイル */
.episode-content .excerpt td a,
.entry-content td a {
display: block;
margin-bottom: 0;
}
/* 画像を含むセル（親要素）のスタイル調整 */
.episode-content .excerpt td:has(img),
.entry-content td:has(img) {
padding: 0 !important;
margin: 0 0 20px 0 !important;
border: none !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
overflow: visible !important;
}
/* 画像を含むセル内の画像リンクのスタイル */
.episode-content .excerpt td:has(img) a,
.entry-content td:has(img) a {
display: block;
margin-bottom: 0;
line-height: 0;
}
/* 画像を含むセル内の画像リンク内の画像 */
.episode-content .excerpt td:has(img) a img,
.entry-content td:has(img) a img {
display: block;
margin: 0 0 15px 0;
width: 100% !important;
height: auto !important;
}
/* 画像を含むセル内の画像の後のテキストや要素 */
.episode-content .excerpt td:has(img) a + *,
.entry-content td:has(img) a + *,
.episode-content .excerpt td:has(img) > *:not(a):not(img),
.entry-content td:has(img) > *:not(a):not(img) {
display: block !important;
margin-top: 15px !important;
word-break: break-word;
overflow-wrap: break-word;
clear: both;
}
/* 画像を含む行のスタイル調整 */
.episode-content .excerpt tr:has(td:empty):has(td img),
.entry-content tr:has(td:empty):has(td img) {
border-bottom: none !important;
padding: 0 !important;
margin-bottom: 20px !important;
}
/* 画像を含む行内の空のセルを非表示（既に:emptyで非表示になっているが念のため） */
.episode-content .excerpt tr:has(td:empty):has(td img) td:empty,
.entry-content tr:has(td:empty):has(td img) td:empty {
display: none !important;
}
/* 画像を含むセルの親td（隣接セレクターで確実にターゲット） */
.episode-content .excerpt td:empty + td,
.entry-content td:empty + td {
padding: 0 !important;
margin: 0 0 20px 0 !important;
border: none !important;
display: block !important;
overflow: visible !important;
}
/* 画像を含むセル内のすべての要素を適切に表示 */
.episode-content .excerpt td:empty + td *,
.entry-content td:empty + td * {
max-width: 100%;
}
/* 画像を含むセル内の画像リンクのスタイル（隣接セレクター版） */
.episode-content .excerpt td:empty + td a,
.entry-content td:empty + td a {
display: block;
margin-bottom: 0;
line-height: 0;
}
/* 画像を含むセル内の画像リンク内の画像（隣接セレクター版） */
.episode-content .excerpt td:empty + td a img,
.entry-content td:empty + td a img {
display: block;
margin: 0 0 15px 0;
width: 100% !important;
height: auto !important;
}
/* 画像を含むセル内の画像の後のテキスト（隣接セレクター版） */
.episode-content .excerpt td:empty + td a + *,
.entry-content td:empty + td a + *,
.episode-content .excerpt td:empty + td > *:not(a):not(img),
.entry-content td:empty + td > *:not(a):not(img) {
display: block !important;
margin-top: 15px !important;
word-break: break-word;
overflow-wrap: break-word;
clear: both;
}
.episode-content .excerpt img,
.entry-content img {
width: 100%; /* 横幅いっぱい */
height: auto;
display: block;
max-width: 100%;
}
.episode-inner {
flex-direction: column;
}
.episode-image img {
width: 100%;
height: auto;
}
/* single.php（個別記事ページ）でも横幅を広げる */
.single-wrapper .episode-content {
width: 100%;
max-width: 100%;
}
.pagenavi a,
.pagenavi span {
width: 30px;
height: 30px;
font-size: 12px;
}
.pagenavi a[rel="prev"],
.pagenavi a[rel="next"],
.pagenavi .pages,
.pagenavi .extend {
min-width: 50px;
padding: 0 10px;
font-size: 11px;
}
.pagenavi a.first,
.pagenavi a.last {
min-width: 70px;
padding: 0 12px;
font-size: 11px;
}
#contents,
#page-content,
.prev-next-content {
width: 100%;
max-width: 100%;
padding: 0 15px;
}
.prev-next-content {
flex-direction: column;
gap: 15px;
}
.prev-next-content .btn a {
width: 100%;
text-align: center;
padding: 12px 0;
}
/* single.php（個別記事ページ）で記事の枠を中央寄せ（タブレット） */
.single-wrapper {
width: calc(100% - 30px);
padding: 15px;
}
.single-wrapper #contents {
padding: 0 10px 20px; /* 左右のパディングを減らして横幅を広げる */
max-width: 100%;
}
.single-wrapper .podcast-episode {
max-width: 100%;
margin: 0 auto;
padding: 20px;
}
/* タブレットでもテーブルを適切に表示 */
.episode-content .excerpt table,
.entry-content table {
width: 100%;
height: auto !important; /* インラインスタイルの高さ指定を上書き */
border-collapse: collapse;
table-layout: auto;
word-wrap: break-word;
margin: 0 0 20px 0 !important; /* テーブルの下に余白を追加 */
display: table !important; /* テーブル表示を維持 */
clear: both !important; /* 重なりを防ぐ */
float: none !important; /* フロートを無効化 */
}
.episode-content .excerpt tbody,
.entry-content tbody {
display: table-row-group !important;
}
.episode-content .excerpt tr,
.entry-content tr {
display: table-row !important;
height: auto !important; /* インラインスタイルの高さ指定を上書き */
clear: both;
}
.episode-content .excerpt td,
.entry-content td {
display: table-cell !important;
height: auto !important; /* インラインスタイルの高さ指定を上書き */
line-height: 1.6;
vertical-align: top;
padding: 6px 0;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
max-width: 100% !important;
box-sizing: border-box;
}
.episode-content .excerpt td:first-child,
.entry-content td:first-child {
white-space: normal;
max-width: 25%;
}
/* タブレットでもテーブル以外の要素が適切に表示されるように */
.episode-content .excerpt p,
.entry-content p {
display: block !important;
margin: 0 0 15px 0 !important;
clear: both !important;
position: relative;
float: none !important;
}
/* タブレットでもテーブルの後の要素が適切に表示されるように */
.episode-content .excerpt table + p,
.entry-content table + p,
.episode-content .excerpt table + *,
.entry-content table + * {
margin-top: 20px !important;
clear: both !important;
display: block !important;
float: none !important;
}
/* ターブルを含むexcerptやentry-contentもクリア */
.episode-content .excerpt,
.entry-content {
clear: both;
overflow: visible;
}
.ceo .ceo_message_img {
height: 450px;
}
/* PCパスを768幅に比例スケール（右端のカーブが自然になるよう制御点を調整） */
.ceo_message_img::after {
background-image: url('data:image/svg+xml;utf8,');
}
.ceo_message_text h2 {
font-size: 1.5rem;
}
.disaster-section .quality-row-card {
gap: 21px;
padding: 19px 5vw 18px 3vw;
border-radius: 10px;
min-height: 0;
}
.disaster-section .quality-row-card .img-side img {
max-width: 230px;
border-radius: 11px;
}
.disaster-section .quality-row-card .img-side .img-large {
max-width: 290px !important;
border-radius: 13px;
}
.disaster-section .quality-row-card .img-side {
min-width: 160px;
flex: 0 0 160px;
}
.disaster-section .quality-row-card h3 {
font-size: 1.11em;
padding-left: 9px;
border-left-width: 3.3px;
}
.disaster-section .quality-row-card .card-label {
font-size: .97em;
padding: 3.5px 11px;
border-radius: 7px;
margin-bottom: 10px;
}
.invoice-guide {
padding: 18px 7vw;
margin-bottom: 23px;
border-radius: 8px;
font-size: .97em;
}
.invoice-section-title {
font-size: 1.09em;
margin: 20px 0 10px 0;
padding-left: 0.52em;
}
.invoice-links {
gap: 10px;
margin-bottom: 12px;
}
.invoice-link-btn {
font-size: 0.97em;
padding: 0.55em 1em 0.55em 0.8em;
}
footer {
padding-top: 15px;
padding-bottom: 50px;
}
.main_footer_content {
margin: 40px 15px;
height: auto;
min-height: 250px;
}
.logo_text {
margin-bottom: 30px;
}
.logo_text li {
margin: 8px 15px;
font-size: 0.9rem;
}
.logo_text li img {
max-width: 180px;
height: auto;
}
.fnav_flex {
margin: 30px 15px;
display: flex;
flex-direction: column;
gap: 25px;
align-items: center;
}
.fnav_flex ul {
width: 100%;
max-width: 500px;
}
.fnav_flex li {
margin: 8px 15px;
font-size: 0.85rem;
text-align: center;
}
.main_footer_content small {
display: block;
margin-top: 30px;
font-size: 0.75rem;
}
.topics_single_content {
padding: 20px 15px 30px;
}
.topics_single_content img,
.topics_single_content p img,
.topics_single_content figure img,
.topics_single_content .wp-caption img {
max-width: 100%; /* スマホでは親要素の幅に合わせる */
margin: 20px auto;
}
.award_item {
padding: 20px;
}
.award_item_content {
gap: 20px;
}
.award_item_image {
flex: 0 0 250px;
}
.award_item_header h2 {
font-size: 1.1rem;
}
.past_results_content h1 {
font-size: 1.5rem;
margin: 30px 0 40px;
}
.pastlist {
margin: 30px 0 40px;
}
.pastlist .w33 {
gap: 10px;
}
.pastlist .w33 li a {
padding: 10px 16px;
font-size: 0.9rem;
}
.past_results_list_content {
padding: 30px 0;
}
.past_results_list_content h2 {
font-size: 1.2rem;
margin: 40px 0 20px;
}
.past_results_list_content .pastbox {
font-size: 0.85rem;
}
.past_results_list_content .pastbox th,
.past_results_list_content .pastbox td {
padding: 12px 8px;
}
.past_results_list_content .pastbox01 {
width: 45%;
}
.past_results_list_content .pastbox02 {
width: 25%;
}
.past_results_list_content .pastbox03 {
width: 30%;
}
.topics {
width: calc(100% - 30px) !important;
max-width: 100% !important; /* 追加 */
padding-top: 15px;
box-sizing: border-box;
}
.topics .wrapper {
padding: 0 20px 20px !important;
max-width: 100% !important; /* 追加 */
box-sizing: border-box;
}
.topics #topicpath {
padding: 0 20px !important;
margin-bottom: 15px;
box-sizing: border-box;
}
.topics #page-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.topics .entry-content h1 {
font-size: 1.8em !important;
padding: 60px 0 30px !important;
letter-spacing: 0.15rem;
}
.topics_flex {
gap: 15px;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.topics_under_item {
padding: 12px;
gap: 12px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.topics_under_item .day {
flex: 0 0 25%;
font-size: 0.9rem;
}
.topics_under_item .topics_text p {
padding-left: 20px;
font-size: 0.95rem;
border-left-width: 3px;
}
.topics_single_content {
padding: 20px 15px 30px;
}
.topics_single_content h1 {
font-size: 1.4rem;
padding: 30px 0 35px;
letter-spacing: 0.15rem;
}
.topics_single_content h1::after {
width: 50px;
height: 2px;
margin: 8px auto 0;
}
.topics_single_content p {
font-size: 0.95rem;
line-height: 1.8;
}
.topics_single_content img,
.topics_single_content p img,
.topics_single_content figure img,
.topics_single_content .wp-caption img {
max-width: 100%; /* スマホでは親要素の幅に合わせる */
margin: 20px auto;
}
.topics_single_content .alignleft,
.topics_single_content .alignright,
.topics_single_content .aligncenter {
max-width: 100%;
margin: 20px auto;
}
.public-works-contents {
margin: 40px 0;
height: auto;
display: flex;
flex-direction: column; /* 縦並びに変更 */
overflow: hidden; /* はみ出しを防ぐ */
}
.public-works-image {
width: 100%;
float: none;
margin-bottom: 20px;
height: auto;
order: 1; /* 画像を上に */
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.public-works-image img {
height: auto;
max-height: 400px; /* 画像の最大高さを制限 */
object-fit: cover;
}
.public-works-text {
position: relative;
width: 100%;
padding: 30px 20px;
order: 2; /* テキストを下に */
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
top: auto !important;
left: auto !important;
right: auto !important;
will-change: auto; /* アニメーション最適化を無効化 */
}
/* SP表示時はアニメーションを無効化（開始位置と終了位置を同じにする） */
.public-works-text.wow.fadeInLeft,
.public-works-text.wow.fadeInRight,
.public-works-image.wow.fadeInLeft,
.public-works-image.wow.fadeInRight {
animation-name: none !important; /* アニメーションを無効化 */
opacity: 1 !important; /* 常に表示 */
}
.public-works-contents h2 span {
display: block;
}
/* 逆レイアウトも同様に */
.public-works-contents-reverse {
display: flex;
flex-direction: column; /* 縦並びに変更 */
overflow: hidden; /* はみ出しを防ぐ */
}
.public-works-contents-reverse .public-works-image {
float: none;
order: 1; /* 画像を上に */
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
.public-works-contents-reverse .public-works-text {
left: auto;
right: auto;
order: 2; /* テキストを下に */
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
top: auto !important;
will-change: auto; /* アニメーション最適化を無効化 */
}
.results-link-banners {
flex-direction: column;
gap: 20px;
margin: 40px 0;
overflow: hidden; /* はみ出しを防ぐ */
}
.results-link-banner {
max-width: 100%;
transform: translate3d(0, 0, 0) !important; /* アニメーション開始位置を固定 */
will-change: auto; /* アニメーション最適化を無効化 */
}
/* SP表示時はアニメーションを無効化 */
.results-link-banner.wow.fadeInLeft,
.results-link-banner.wow.fadeInRight {
animation-name: none !important; /* アニメーションを無効化 */
opacity: 1 !important; /* 常に表示 */
}
.results-link-banner a {
height: 180px;
}
.results-link-banner .banner-overlay h3 {
font-size: 1.3rem;
}
.results-link-banner .banner-overlay p {
font-size: 0.85rem;
}
.results_content h1,
.results_categories_content h1 {
font-size: 1.8em;
padding: 60px 0 30px;
}
.results_content h1::before,
.results_categories_content h1::before {
font-size: 0.9rem;
bottom: 15px;
}
.results_main_categories {
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.main_category_item {
min-width: 100%;
max-width: 100%;
padding: 40px 30px;
}
.main_category_item h2 {
font-size: 2rem;
}
.results_category_buttons,
.results_categories_category_buttons {
gap: 8px;
margin-bottom: 20px;
}
.category_btn {
padding: 8px 16px;
font-size: 0.85rem;
}
.results_flex {
gap: 15px;
padding: 0 20px;
}
.results_under_item {
padding: 12px;
gap: 12px;
}
.results_under_item .day {
flex: 0 0 25%;
font-size: 0.9rem;
}
.results_under_item .results_text p {
padding-left: 20px;
font-size: 0.95rem;
}
}
@media screen and (max-width: 690px) {
.offices-list-vertical {
gap: 29px;
}
.office-block-vertical {
padding: 17px 2vw 18px 2vw;
border-radius: 11px;
gap: 11px;
}
.office-title {
font-size: 1.08em;
}
.office-img-holder {
width: 50vw;
min-width: 90px;
max-width: 90vw;
}
.office-img-holder img {
width: 80vw; min-width: 60px; max-width: 95vw;
max-height: 265px;
border-radius: 9px;
}
.office-map-holder iframe { border-radius: 8px; min-width:90px; height: 146px;}
.office-green-hr { border-radius: 2px; }
}
@media screen and (max-width: 600px) {
.company-summary-list li {
flex-direction: column;
padding: 14px 0;
font-size: 1em;
}
.company-summary-label {
width: auto;
min-width: unset;
padding-right: 0;
margin-bottom: 3px;
font-size: 1em;
}
.company-summary-value {
width: 100%;
font-size: 0.98em;
}
.business-summary-list li {
flex-direction: column;
padding: 14px 0;
font-size: 1em;
}
.business-summary-label {
width: auto;
min-width: unset;
padding-right: 0;
margin-bottom: 3px;
font-size: 1em;
}
.business-summary-value {
width: 100%;
font-size: 0.98em;
}
.officer-summary {
margin: 32px auto 16px auto;
max-width: 98vw;
}
.officer-section-title {
font-size: 1.13em;
padding-left: 12px;
margin-top: 22px;
margin-bottom: 10px;
border-left-width: 4px;
}
.officer-table th,
.officer-table td {
padding: 10px 8px;
font-size: 0.98em;
line-break: anywhere;
}
.officer-table th {
width: 45vw;
min-width: 112px;
}
.quality-grid {
max-width: 99vw;
}
.quality-card {
padding: 17px 4vw 10px 4vw;
border-radius: 9px;
}
}
@media screen and (max-width: 599px) {
.history-jmc { padding-left: 2px; padding-right: 2px; }
.history-jmc-list li {
display: block;
padding: 22px 0 16px 0;
}
.hjl-year {
width: 100%;
max-width: 100%;
min-width: 0;
align-items: flex-start;
padding-right: 0;
flex-direction: row;
gap: .7em;
margin-bottom: 4px;
justify-content: flex-start;
font-size: .95em;
}
.hjl-content {
padding-left: 0;
font-size: 0.97em;
}
}
@media screen and (max-width: 480px) {
/* h1 SPサイズ（指定がなかったもの） */
.ceo h1,
.slogan h1,
.motto h1,
.outline_content h1,
.next_stage h1,
.about_content h1,
.business_items h1,
.officer h1,
.chart h1,
.office h1,
.quality h1,
.purification_content h1,
.disaster-prevention_content h1,
.invoice_content h1,
.media_content h1,
.award_content h1,
.contact_content h1 {
font-size: 1.5rem;
}
.ceo .ceo_message_img {
height: 320px; /* 画像280px + 波線40px */
overflow: hidden;
}
/* 画像は上から280pxのみ（画像の下＝ここが基準） */
.ceo .ceo_message_img_inner {
top: 0;
left: 0;
right: 0;
bottom: 40px; /* 波線40px分は画像エリアの外（直下） */
}
/* 波線は画像の直下（画像の下を基準にした40px帯）。SP用viewBox 480のSVG */
.ceo_message_img::after {
bottom: 0;
height: 40px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
background-position: bottom center;
background-repeat: no-repeat;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.officer-summary {
margin: 18px auto 8px auto;
max-width: 100vw;
padding: 0 3vw;
}
.officer-section-title {
font-size: 1.08em;
padding-left: 7px;
margin-top: 16px;
margin-bottom: 8px;
border-left-width: 3px;
}
.officer-table {
font-size: 0.97em;
width: 100%;
min-width: unset;
}
.officer-table th,
.officer-table td {
padding: 9px 5px;
font-size: 0.93em;
word-break: break-all;
}
.officer-table th {
width: 44vw;
min-width: 80px;
font-size: 0.95em;
}
.officer-table td {
font-size: 0.95em;
}
.disaster-section .quality-row-card {
flex-direction: column;
gap: 14px;
align-items: stretch;
padding: 11px 2vw 10px 2vw;
border-radius: 7px;
margin-bottom: 8vw;
}
.disaster-section .quality-row-card .img-side,
.disaster-section .quality-row-card .content-side {
width: 100%;
min-width: 0;
max-width: 100%;
}
.disaster-section .quality-row-card .content-side {
order: 1;
}
.disaster-section .quality-row-card .img-side {
order: 2;
align-items: center;
margin-bottom: 7px;
gap: 12px;
justify-content: flex-start;
}
.disaster-section .quality-row-card .img-side img,
.disaster-section .quality-row-card .img-side .img-large {
max-width: 98vw;
width: 100%;
border-radius: 10px;
}
@media screen and (min-width: 373px) {
.disaster-section .quality-row-card .img-side img,
.disaster-section .quality-row-card .img-side .img-large {
max-width: 365px;
}
}
.disaster-section .quality-row-card .img-side .img-large {
border-radius: 11px;
}
.disaster-section .quality-row-card h3 {
font-size: .99em;
padding-left: 6px;
border-left-width: 2.2px;
}
.disaster-section .quality-row-card .card-label {
font-size: .9em;
padding: 3.5px 8px;
border-radius: 6px;
margin-bottom: 7px;
}
.disaster-section .quality-row-card p,
.disaster-section .quality-row-card .meta {
font-size: .96em;
}
.invoice-guide {
padding: 13px 3vw;
font-size: .96em;
}
.invoice-section-title {
font-size: 0.99em;
padding-left: 0.38em;
margin: 12px 0 6px 0;
border-left-width: 3px;
}
.invoice-links {
flex-direction: column;
gap: 8px;
}
.invoice-link-btn {
font-size: .96em;
width: 100%;
justify-content: flex-start;
padding: 0.5em 0.65em 0.5em 0.7em;
}
.award_list {
gap: 20px;
margin-top: 30px;
}
.award_item {
padding: 15px;
}
.award_item_content {
flex-direction: column;
gap: 15px;
}
.award_item_image {
flex: 1 1 auto;
width: 100%;
}
.award_item_header {
margin-bottom: 15px;
padding-bottom: 10px;
}
.award_item_header h2 {
font-size: 1rem;
}
.award_item_info p {
font-size: 0.9rem;
margin-bottom: 12px;
}
.past_results_content h1 {
font-size: 1.3rem;
margin: 20px 0 30px;
}
.pastlist .w33 {
flex-direction: column;
gap: 8px;
}
.pastlist .w33 li a {
padding: 12px 16px;
text-align: center;
}
.past_results_list_content h2 {
font-size: 1.1rem;
margin: 30px 0 15px;
}
.past_results_list_content .pastbox {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.past_results_list_content .pastbox thead {
display: none;
}
.past_results_list_content .pastbox th {
display: none;
}
.past_results_list_content .pastbox tbody {
display: block;
}
.past_results_list_content .pastbox tr:has(th),
.past_results_list_content .pastbox tbody > tr:first-child {
display: none;
}
.past_results_list_content .pastbox tr {
display: block;
margin-bottom: 20px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.past_results_list_content .pastbox td {
display: block;
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
text-align: left;
}
.past_results_list_content .pastbox td:last-child {
border-bottom: none;
}
.past_results_list_content .pastbox td::before {
content: attr(data-label);
font-weight: 600;
color: #047649;
display: block;
margin-bottom: 5px;
}
.past_results_list_content .pastbox td:first-child::before {
content: "工事名：";
}
.past_results_list_content .pastbox td:nth-child(2)::before {
content: "工期：";
}
.past_results_list_content .pastbox td:nth-child(3)::before {
content: "発注者：";
}
tbody .pastbox_header {
display: none;
}
.topics {
width: calc(100% - 20px) !important;
padding-top: 10px;
box-sizing: border-box;
}
.topics .wrapper {
padding: 0 15px 15px !important;
max-width: 100%;
box-sizing: border-box;
}
.topics #topicpath {
padding: 0 15px !important;
margin-bottom: 10px;
font-size: 0.85em;
box-sizing: border-box;
}
.topics #page-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.topics .entry-content h1 {
font-size: 1.5em !important;
padding: 40px 0 25px !important;
letter-spacing: 0.1rem;
}
.topics_flex {
gap: 12px;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.topics_under_item {
flex-direction: column;
padding: 15px;
gap: 10px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.topics_under_item .day {
flex: none;
width: 100%;
text-align: left;
font-size: 0.85rem;
padding-bottom: 8px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 5px;
}
.topics_under_item .topics_text {
width: 100%;
}
.topics_under_item .topics_text p {
padding-left: 15px;
font-size: 0.9rem;
line-height: 1.6;
border-left-width: 3px;
}
.topics_single_content {
padding: 15px 12px 25px;
}
.topics_single_content h1 {
font-size: 1.2rem;
padding: 25px 0 30px;
letter-spacing: 0.1rem;
margin-bottom: 20px;
}
.topics_single_content h1::after {
width: 40px;
height: 2px;
margin: 6px auto 0;
}
.topics_single_content p {
font-size: 0.9rem;
line-height: 1.9;
}
.topics_single_content img,
.topics_single_content p img,
.topics_single_content figure img,
.topics_single_content .wp-caption img {
margin: 15px auto;
}
.topics_single_content .alignleft,
.topics_single_content .alignright,
.topics_single_content .aligncenter {
margin: 15px auto;
}
.public-works-contents {
margin: 30px 0;
}
.public-works-text {
padding: 20px 15px;
}
.public-works-contents h2 {
font-size: 1.3rem;
}
.public-works-contents h2 span {
display: block;
font-size: 0.85rem;
}
.public-works-contents h3 {
font-size: 1rem;
}
.public-works-contents p {
font-size: 0.85rem;
}
.results-link-banners {
margin: 30px 0;
gap: 15px;
}
.results-link-banner a {
height: 150px;
}
.results-link-banner .banner-overlay {
padding: 20px 15px 15px;
}
.results-link-banner .banner-overlay h3 {
font-size: 1.1rem;
}
.results-link-banner .banner-overlay p {
font-size: 0.8rem;
}
.results_content h1,
.results_categories_content h1 {
font-size: 1.5em;
padding: 40px 0 25px;
letter-spacing: 0.1rem;
}
.results_content h1::before,
.results_categories_content h1::before {
font-size: 0.8rem;
bottom: 10px;
}
.results_main_categories {
gap: 15px;
margin-bottom: 30px;
}
.main_category_item {
padding: 30px 20px;
}
.main_category_item h2 {
font-size: 1.5rem;
}
.main_category_item .category_count {
font-size: 1.1rem;
}
.results_category_buttons,
.results_categories_category_buttons {
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.category_btn {
width: 100%;
padding: 12px 16px;
font-size: 0.85rem;
text-align: center;
}
.results_flex {
gap: 12px;
padding: 0 15px;
}
.results_under_item {
flex-direction: column;
padding: 15px;
gap: 10px;
}
.results_under_item .day {
flex: none;
width: 100%;
text-align: left;
font-size: 0.85rem;
padding-bottom: 8px;
border-bottom: 1px solid #e0e0e0;
}
.results_under_item .results_text {
width: 100%;
}
.results_under_item .results_text p {
padding-left: 15px;
font-size: 0.9rem;
line-height: 1.6;
}
/* taxonomy-categories.php レスポンシブ対応 */
.results_content .result-block,
.results_categories_content .result-block {
padding: 15px;
margin-bottom: 30px;
}
.results_content .result-block h2,
.results_categories_content .result-block h2 {
font-size: 1.2rem;
}
.results_content .result-block .meta,
.results_categories_content .result-block .meta {
font-size: 0.9rem;
}
.results_content .result-block .img,
.results_categories_content .result-block .img {
flex-direction: column;
gap: 15px;
}
.results_content .result-block .img li,
.results_categories_content .result-block .img li {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (max-width: 420px) {
.offices-list-vertical { gap: 13px; }
.office-block-vertical {
padding: 10px 1vw 9px 1vw;
border-radius: 6px;
}
.office-img-holder img {
border-radius: 5px;
min-height: 90px;
max-height: 140px;
}
.office-map-holder iframe { border-radius: 5px; min-width: 60px; height: 82px; }
.office-green-hr { margin-top: 12px; }
}
@media screen and (max-width: 400px) {
.quality-card {
padding: 9px 1vw 7px 1vw;
border-radius: 7px;
}
.quality-card h2 {
font-size: 1.05em;
}
}
@media screen and (min-width: 1080px) {
.history-jmc {
max-width: 800px;
}
.hjl-year {
width: 210px;
font-size: 1.17em;
padding-right: 50px;
}
}