html {
scroll-behavior: smooth;
}
.inner,div {
scroll-margin-top: 120px;
}
/* ----------------------------------
* Header
---------------------------------- */
/* ==========================================
Header 全体スタイル (修正完全版)
========================================== */
/* --- 全体レイアウト --- */
.header-logo a {
display: flex;
justify-content: center;
align-items: center;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
padding: 10px 0px;
background-color: #fff;
box-sizing: border-box;
}
/* ----------------------------------
* 固定サイドナビゲーション
* ---------------------------------- */
.side-nav {
border: 1px solid white;
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
}
.side-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px;
padding: 16px 0;
text-decoration: none;
color: #ffffff;
}
/* 上部：お知らせ (黒背景) */
.side-nav-item.news {
background-color: #0b1528;
}
.side-nav-item.news:hover {
background-color: #1e2d4a;
opacity: 1 !important;
}
/* 下部：カタログダウンロード (青背景) */
.side-nav-item.catalog {
background-color: var(--main);
}
.side-nav-item.catalog:hover {
background-color: #002d6b;
opacity: 1 !important;
}
/* アイコン設定 */
.side-nav-icon {
font-size: 18px;
margin-bottom: 12px;
}
/* 縦書きテキスト設定 */
.side-nav-text {
writing-mode: vertical-rl;
/* 縦書き指定 */
text-orientation: mixed;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.15em;
white-space: nowrap;
}
/* 英語版テキスト調整用 */
.side-nav-text.is-en {
font-size: 11px;
letter-spacing: 0.08em;
}
/* ドロワー（スマホ用）表示時の制御 */
#drawer {
background-color: #FFF;
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
width: 100%;
position: fixed;
top: -100%;
left: 0;
transition: .5s;
z-index: 10;
}
#drawer.show {
top: 0;
background-color: rgba(255, 255, 255, 0.8);
}
#header.drawer {
height: 64px;
}
#header.drawer .header-logo a {
width: 230px;
}
/* ==========================================
PCサイズ表示 (min-width: 768px)
========================================== */
@media print,
screen and (min-width: 768px) {
#header-area {
position: relative;
z-index: 10;
}
#header {
position: fixed;
top: 0;
width: 100%;
gap: 30px;
font-size: clamp(1.4rem, 1.33vw, 1.6rem);
height: auto;
padding: 12px 30px;
}
html[lang="en"] #header {
font-size: clamp(1.4rem, 1.33vw, 1.8rem);
}
.header-logo {
padding-left: 0;
}
.header-logo a {
display: block;
width: clamp(160px, 17.13vw, 218px);
}
#header .trigger {
display: none;
}
/* --- 右側エリア全体（上下2段構造） --- */
.gnav-area {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
height: auto;
}
#gnav {
display: block;
position: static;
padding: 0;
height: auto;
}
.top-inner {
margin-top: 30px;
}
.display-sp {
display: none;
}
/* ------------------------------------------
【上段】子会社リンク / サイトマップ / English
------------------------------------------ */
.subnav-area {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.2rem;
}
/* 子会社・関連会社（青枠ボタン） */
.subnav-area .btn-company {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid #005bac;
color: #005bac;
padding: 3px 8px;
border-radius: 3px;
text-decoration: none;
font-size: 1.2rem;
background-color: #fff;
transition: background-color 0.2s;
}
.subnav-area .btn-company:hover {
background-color: #f0f7ff;
}
/* サイトマップ */
.subnav-area .link-sitemap {
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 1.3rem;
}
/* English（国旗付き） */
#gnav .lang {
position: static;
}
#gnav .lang a {
display: inline-block;
text-decoration: none;
}
#gnav .lang a ul {
border: none;
border-radius: 0;
display: flex;
align-items: center;
gap: 6px;
font-size: 1.3rem;
height: auto;
width: auto;
margin: 0;
padding: 0;
list-style: none;
}
#gnav .lang li.current {
display: flex;
align-items: center;
gap: 5px;
color: #333;
font-weight: normal;
}
.icon-flag {
width: 20px;
height: auto;
}
/* ------------------------------------------
【下段】メインナビ ＋ 検索ボックス
------------------------------------------ */
.mainnav-area {
display: flex;
align-items: center;
gap: 25px;
}
/* メインナビゲーション (.gnav_lv1) */
.gnav_lv1 {
display: flex;
align-items: center;
gap: clamp(20px, 2.5vw, 40px);
letter-spacing: .04em;
margin: 0;
padding: 0;
list-style: none;
}
.gnav_lv1>li {
cursor: pointer;
position: relative;
padding-bottom: 2px;
}
.gnav_lv1>li>a,
.gnav_lv1>li>span {
display: inline-block;
line-height: 1.3;
height: auto;
position: relative;
color: #333;
text-decoration: none;
font-weight: bold;
}
/* ホバー時の下線アニメーション */
.gnav_lv1>li>a::after,
.gnav_lv1>li>span::after {
background-color: var(--main, #005bac);
content: "";
height: 2px;
width: 100%;
position: absolute;
bottom: -2px;
left: 0;
transform: translateY(6px);
opacity: 0;
transition: .3s;
}
.gnav_lv1>li:hover>a::after,
.gnav_lv1 li:hover>span::after {
transform: translateY(0);
opacity: 1;
}
/* 「採用情報」を他のメニューと同じ見た目に統一 */
#gnav li.gnav_contact {
position: static;
padding: 0;
}
#gnav li.gnav_contact span {
background-color: transparent;
color: inherit;
width: auto;
height: auto;
line-height: inherit;
border-radius: 0;
font-size: inherit;
padding: 0;
}
/* 検索ボックス */
.header-search form {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
background-color: #fff;
width: 210px;
}
.header-search input {
border: none;
outline: none;
width: 100%;
font-size: 1.2rem;
color: #333;
}
.header-search button {
background: none;
border: none;
cursor: pointer;
padding: 0 0 0 4px;
font-size: 1.3rem;
}
/* ------------------------------------------
ドロップダウンメニュー (.gnav_lv2)
------------------------------------------ */
.gnav_lv2 {
background-color: var(--gray1, #f8f8f8);
padding: 8px 0;
width: 214px;
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
opacity: 0;
transition: .4s;
list-style: none;
}
.gnav_lv1>li:hover .gnav_lv2 {
visibility: visible;
opacity: 1;
}
.gnav_lv2 li+li {
border-color: var(--gray2, #eee);
border-style: solid;
border-width: 1px 0 0;
}
.gnav_lv2 li a {
display: block;
font-size: clamp(1.2rem, 1vw, 1.4rem);
line-height: 1.5;
padding: 8px 20px 8px 35px;
text-decoration: none;
transition: .3s;
color: #333;
position: relative;
}
.gnav_lv2 li a::before {
background-image: url("../img/icon/arrow_forward.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
height: 16px;
width: 16px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 12px;
}
.gnav_lv2 li a:hover {
color: #666;
}
}
/* ----------------------------------
* Main
---------------------------------- */
#content-area {
/*min-height: calc(100vh - 332px);*/
}
#page-title {
background: url(../img/bg_Image.jpeg) no-repeat center center;
background-size: cover;
width: 100%;
}
#page-title h1 {
position: relative;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.8rem;
font-weight: var(--fw-normal);
letter-spacing: .04em;
line-height: 1.66;
min-height: 155px;
text-align: center;
}
#page-title h1 img {
display: block;
width: 100%;
height: auto;
}
.page-title-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
text-align: center;
text-shadow:
0 2px 8px rgba(0, 0, 0, .5),
0 0 15px rgba(0, 0, 0, .3);
}
.inner {
max-width: calc(var(--max) + 40px);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.inner-p-dl {
max-width: calc(var(--max) + 200px);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.inner_top {
max-width: 100%;
margin-top: 99px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
}
.inner_products {
margin-bottom: 30px;
}
#breadcrumb {
margin: 17px 0 50px 0;
}
#breadcrumb ol {
display: flex;
flex-wrap: wrap;
}
#breadcrumb ol li {
font-size: 1.2rem;
position: relative;
padding: 0 5px 0 11px;
color: #4d4d4d;
}
#breadcrumb ol li a {
text-decoration: underline;
}
#breadcrumb ol li:first-child {
padding-left: 24px;
background: url("../img/icon/ic_home.svg") no-repeat center left;
background-size: 16px;
}
#breadcrumb ol li:after {
position: absolute;
top: 0;
left: 0;
content: ">";
}
#breadcrumb ol li:first-child:after {
content: "";
}
/* Container ti breadcrumb */
#breadcrumb {
margin: 20px 0 20px 0;
border-radius: 8px; /* Nalukneng a kurba dagiti igid */
}
#breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
#breadcrumb ol li {
position: relative;
padding: 0 10px 0 20px;
color: #64748b;
display: flex;
align-items: center;
}
/* Kakaskasaba nga link */
#breadcrumb ol li a {
text-decoration: none; /* Ibalik/Irekado ti underlining */
color: #475569;
font-weight: 500;
transition: color 0.2s ease;
}
/* Hover effect para kadagiti link */
#breadcrumb ol li a:hover {
color: var(--main, #002060);
text-decoration: underline;
}
/* Umuna nga item (HOME) */
#breadcrumb ol li:first-child {
padding-left: 22px;
background: url("../img/icon/ic_home.svg") no-repeat center left;
background-size: 16px;
}
/* Arrow separator (›) */
#breadcrumb ol li:after {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
content: "›";
font-size: 1.1rem;
color: #94a3b8;
font-weight: bold;
}
#breadcrumb ol li:first-child:after {
content: "";
}
/* Agdama/Ulihi a panid (Current Page) */
#breadcrumb ol li:last-child {
color: var(--main, #002060);
font-weight: bold;
}
/* =========================================
トップページ
========================================= */
/* メインビジュアル全体設定 */
.mv {
position: relative;
width: 100%;
min-height: 500px;
/* 画面に合わせた適切な高さ（100vh等でも可） */
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
}
#page-title .inner_top .mv-title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
position: relative;
color: #fff;
display: flex;
justify-content: left;
align-items: center;
font-size: 3.8rem;
font-weight: bold;
letter-spacing: .04em;
line-height: 1.66;
min-height: 155px;
text-align: left;
}
/* -----------------------------------
① 背景画像スライダー領域
----------------------------------- */
.mv-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
/* 前面コンテンツの後ろに配置 */
}
/* 薄暗いオーバーレイ（文字の視認性を高める暗めのアクリル効果） */
.mv-slider::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
/* 画像の上に少し黒を重ねて文字を読みやすく */
z-index: 2;
}
.mv-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
/* 切り替え時のクロスフェード時間 */
}
/* 現在表示する画像 */
.mv-slide.is-active {
opacity: 1;
}
.mv-slide img {
width: 100%;
height: 100%;
object-fit: cover;
/* 枠いっぱいに綺麗に収める */
}
/* -----------------------------------
② 前面コンテンツ領域（固定表示）
----------------------------------- */
.mv-content {
position: relative;
z-index: 3;
/* スライダーより前に表示 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 60px;
margin-top: 99px;
}
.mv-title {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 24px;
letter-spacing: 0.05em;
}
.mv-text {
line-height: 1.8;
margin-bottom: 36px;
opacity: 0.95;
}
/* ボタン配置 */
.mv-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* ボタン共通CSS */
.mv-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
min-width: 240px;
padding: 16px 24px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
/* 背景を少し暗く透過 */
border: 1px solid #ffffff;
backdrop-filter: blur(4px);
/* 背景を少しぼかす効果 */
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
/* 青色ボタン */
.mv-btn--primary {
background-color: var(--main, #0066cc);
color: #fff;
border: 1px solid var(--main, #0066cc);
}
.mv-btn--primary:hover {
opacity: 1;
}
/* 枠線ボタン */
.mv-btn--outline {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid #fff;
backdrop-filter: blur(4px);
/* 背景をほんのりぼかす */
}
.mv-btn--outline:hover {
background-color: rgba(255, 255, 255, 0.25);
}
.mv-btn .arrow {
margin-left: 12px;
}
.mv-btn:hover {
background-color: #1a2b6d;
border-color: #1a2b6d;
backdrop-filter: none;
transform: translateY(-2px);
opacity: 1;
}
/* =========================================
トップページ事業領域
========================================= */
/* ba 全体コンテナ */
.ba-container {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
/* スマホ表示時に自動折り返し */
margin-top: 30px;
}
/* カード単位の設定 */
.ba-card {
position: relative;
flex: 1;
min-width: 30%;
height: 300px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
}
.ba-card-top {
position: relative;
flex: 1;
min-width: 30%;
height: 140px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
}
/* 左側のテキストエリア */
.ba-content {
position: absolute;
top: 0;
left: 0;
width: 80%;
/* 画像と重なるように広めに設定 */
height: 100%;
padding: 24px;
box-sizing: border-box;
z-index: 2;
/* テキストを前面に配置 */
background-color: #fff;
/* 右側を斜めにカット */
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
z-index: 2;
}
.ba-title {
font-size: 2rem;
font-weight: bold;
color: #1a2b6d;
/* 青系見出しカラー */
margin: 0 0 16px 0;
line-height: 1.3;
}
.ba-text {
font-size: 1.2rem;
color: #333;
margin: 0;
line-height: 1.6;
}
/* 右側の画像エリア */
.ba-image {
position: absolute;
top: 1px;
right: 0;
width: 55%;
/* テキストエリアのカットに合わせて配置 */
height: 100%;
z-index: 1;
/* 左側を斜めにカット */
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
z-index: 1;
}
.ba-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================
東京プラントの強み
========================================= */
/* セクション全体の背景色指定 */
.st-inner {
background: url(/img/top_background.jpg);
background-color: var(--main);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
max-width: 100%;
padding: 60px 20px;
box-sizing: border-box;
color: #fff;
background-blend-mode: soft-light;
}
/* 全体レイアウト */
.st-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* 左側：テキスト部分 */
.st-content {
flex: 1;
}
.st-title {
font-size: 3rem;
font-weight: bold;
margin: 0 0 20px 0;
line-height: 1.3;
}
.st-description {
line-height: 1.8;
margin: 0;
opacity: 0.9;
}
/* 右側：リンク枠一覧 */
.st-links {
display: flex;
gap: 20px;
flex-shrink: 0;
}
/* 右側：各リンクカード (正方形の白い枠線) */
.st-card {
background-color: var(--main);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid #fff;
padding: 20px 15px;
box-sizing: border-box;
text-decoration: none;
color: #fff;
text-align: center;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
/* ホバー時の演出（少し明るく＆浮き上がる） */
.st-card:hover {
background-color: var(--main);
transform: translateY(-3px);
opacity: 1;
}
/* アイコン設定 */
.st-card-icon {
width: 100px;
height: 60px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.st-card-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* カード内見出し */
.st-card-title {
font-size: 1.8rem;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1.3;
}
/* カード内テキスト */
.st-card-text {
font-size: 1rem;
margin: 0;
line-height: 1.5;
opacity: 0.85;
}
/* =========================================
トップページ主要製品カード用スタイル
========================================= */
/* カード全体を囲むコンテナ（横並び） */
.product-item-container {
display: flex;
flex-wrap: wrap;
/* スマホ・タブレットで折り返す */
gap: 20px;
/* カード間の余白 */
margin-top: 30px;
/* 見出しとの間隔 */
}
/* カード個別のスタイル（aタグ） */
.product-item-card {
display: flex;
flex-direction: column;
width: calc(20% - 16px);
/* 5列並び（1200px時）。gapの16px(20px*4/5)を相殺 */
text-decoration: none;
/* リンクの下線を消す */
color: inherit;
border: 1px solid #ccc;
/* スクショ再現：薄いグレーの枠線 */
background-color: #fff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
/* ホバー時の変化 */
box-sizing: border-box;
}
/* ホバー時の効果 */
.product-item-card:hover {
border-color: #003366;
/* 枠線を青に */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* 少し浮かせる */
}
/* 画像表示エリア */
.product-item-card__image-holder {
width: 100%;
height: 0;
padding-top: 80%;
/* 縦横比（約5:4） */
position: relative;
overflow: hidden;
background-color: #fff;
border-bottom: 1px solid #eee;
/* 画像とテキストの区切り線 */
}
.product-item-card__image-holder img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 中央配置 */
max-width: 90%;
max-height: 90%;
object-fit: contain;
/* 画像のアスペクト比を維持して収める */
}
/* テキスト部分（タイトル・説明文） */
.product-item-card__text-content {
padding: 15px;
/* 内側の余白 */
text-align: center;
/* 中央揃え */
flex-grow: 1;
/* 高さを揃える */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* 製品タイトル */
.product-item-card__title {
font-size: 16px;
font-weight: bold;
color: #003366;
/* 東京プラント様の標準色（深い青） */
margin: 0 0 10px 0;
line-height: 1.4;
}
/* 製品説明文 */
.product-item-card__desc {
font-size: 13px;
line-height: 1.6;
color: #666;
margin: 0;
/* 長いテキストを3行で省略表示 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ボタン基本スタイル */
.btn-primary {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20%;
height: 54px;
background-color: #0d2366;
/* 画像に合わせた紺色 */
color: #ffffff;
font-size: 15px;
font-weight: 500;
text-decoration: none;
border-radius: 0px;
/* 角丸なし（必要なら 4px などに） */
box-sizing: border-box;
padding: 0 20px;
transition: all 0.3s ease;
}
/* 中央のテキスト */
.btn-text {
letter-spacing: 0.05em;
}
/* 右側の矢印アイコン */
.btn-arrow {
position: absolute;
right: 20px;
font-size: 18px;
line-height: 1;
transition: transform 0.3s ease;
}
/* ホバー時の演出（少し浮いて背景が滑らかに変化＆矢印が右に移動） */
.btn-primary:hover {
background-color: rgba(13, 35, 102, 0.85);
/* ほんのり透ける */
transform: translateY(-2px);
/* 少し上に浮く */
}
.btn-primary:hover .btn-arrow {
transform: translateX(4px);
/* 矢印が右に少し動く */
}
/* ------------------------------------------------------
* お知らせ
------------------------------------------------------ */
/* タブメニューのデザイン */
.tab-menu {
display: flex;
justify-content: space-around;
list-style: none;
padding: 0;
margin: 0 0 20px 0;
border-bottom: 1px solid #dcdcdc;
}
.tab-item {
padding: 10px 0;
cursor: pointer;
font-weight: bold;
color: #333;
position: relative;
width: 33.33%;
text-align: center;
}
/* 選択中のタブ（下線と矢印） */
.tab-item.active {
color: var(--main);
}
.tab-item.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--main);
}
.tab-item.active::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: var(--main) transparent transparent transparent;
z-index: 1;
}
/* 日付とカテゴリバッジのレイアウト */
.date-cate {
display: flex;
align-items: center;
gap: 15px;
}
/* 丸枠カテゴリバッジ */
.badge {
display: inline-block;
border: 1px solid var(--main);
color: var(--main);
border-radius: 20px;
padding: 2px 12px;
font-size: 0.8em;
white-space: nowrap;
}
/* リンク全体の見た目 */
.flat-link {
display: inline-block;
padding: 15px 30px;
/* ボタンの内側の余白（上下15px、左右30px） */
background-color: var(--main);
/* 背景を青色で塗りつぶす */
color: white;
/* テキストの色を白色にする */
text-decoration: none;
/* 下線を消す */
font-weight: bold;
/* 文字を太くして視認性を上げる */
transition: background-color 0.2s ease;
/* マウスを乗せたときの色変わりをなめらかにする */
}
/* マウスを乗せたときの見た目 */
.flat-link:hover {
background-color: var(--main);
opacity: 0.8;
/* 少し濃い青色にしてクリック感を出す */
}
/* ------------------------------------------------------
* エンジニアリングソリューション
------------------------------------------------------ */
/* コンテナ全体のスタイル */
.eng-sol-container {
display: flex;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}
/* 左右のカードカラム */
.eng-sol-card {
flex: 1;
display: flex;
flex-direction: column;
}
/* 立体感のあるタイトルバー */
.eng-sol-title {
position: relative;
background: linear-gradient(to bottom, #001a43 0%, var(--main) 100%);
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 8px 16px;
margin: 0 0 16px 0;
border-left: 3px solid #ffffff;
border-top: 1px solid #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
display: inline-block;
letter-spacing: 0.05em;
}
/* 説明テキスト */
.eng-sol-text {
font-size: 14px;
line-height: 1.6;
color: #333333;
margin: 0 0 20px 0;
}
/* 画像エリア */
.eng-sol-image-wrapper {
margin-top: auto;
width: 100%;
}
.eng-sol-image {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* プロジェクト体制図 全体コンテナ */
.system-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 15px;
max-width: 400px;
/* 必要に応じて調整してください */
}
/* 上段（中央配置） */
.system-chart__top {
display: flex;
justify-content: center;
width: 100%;
}
/* 下段（2列のグリッド配置） */
.system-chart__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
}
/* 共通の青枠ボックス */
.system-chart__box {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 8px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
border: 2px solid #2b558c;
/* 外枠の紺色 */
box-sizing: border-box;
min-height: 52px;
line-height: 1.3;
}
/* 通常の青色ボックス（設計会社、建築会社など） */
.system-chart__box--blue {
background-color: #0070c0;
}
/* 水色ボックス（東京プラントテストシステム） */
.system-chart__box--cyan {
background-color: #00a0e9;
}
/* テーブルの基本設定 */
.table-wrapper {
width: 100%;
overflow-x: auto;
/* 画面からはみ出た場合に横スクロールを可能にする */
margin-top: 10px;
}
.spec-table {
max-width: 100%;
border-collapse: collapse;
border: 2px solid #000000;
font-family: sans-serif;
}
.spec-table thead th {
background-color: #002060;
height: 35px;
border: 1px solid #000000;
}
.spec-table th,
.spec-table td {
border: 1px solid #000000;
padding: 8px 12px;
font-size: 14px;
line-height: 1.4;
text-align: left;
}
.spec-table tbody th {
background-color: #ffffff;
font-weight: normal;
width: 40%;
}
.spec-table tbody td {
background-color: #ffffff;
}
/* ------------------------------------------------------
* products
------------------------------------------------------ */
/* グリッドレイアウト（1行に2つ並べる設定） */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 2列に分割 */
gap: 30px;
/* カード同士の縦横の余白 */
width: 100%;
box-sizing: border-box;
}
/* カード全体 */
.product-card {
gap: 20px;
background-color: #ffffff;
border: 1px solid #dcdcdc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
padding: 24px 20px;
box-sizing: border-box;
align-items: start;
}
/* 左側コンテンツ */
.product-card__content {
grid-column: 1;
grid-row: 1;
}
.product-card__image-wrapper {
grid-column: 2;
grid-row: 1;
}
/* タイトル */
.product-card__title {
text-align: center;
color: var(--main);
font-weight: bold;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1.5px solid var(--main);
}
/* 説明テキスト */
.product-card__text {
font-size: 1.4rem;
color: #333333;
line-height: 1.6;
margin: 0 0 20px 0;
flex-grow: 1;
/* ボタン位置を下部に統一 */
}
/* ボタン */
.product-card__btn {
grid-column: 1 / -1;
/* 全列を跨ぐ */
grid-row: 2;
justify-self: center;
/* ボタンをカード全体の横中央に配置（左寄せの場合は flex-start） */
display: flex;
align-items: center;
justify-content: space-between;
width: 160px;
padding: 10px;
background-color: #031b5e;
color: #ffffff;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
box-sizing: border-box;
margin: 0 auto;
margin-top: 10px;
/* 画像やテキストとの上余白 */
}
.product-card__btn span {
width: 100%;
text-align: center;
}
/* --- CSSで描画する矢印 --- */
/* 1. 矢印の「軸（横線）」 */
/*
.product-card__btn::before {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 1.5px;
background-color: #ffffff;
transition: right 0.3s ease;
}
*/
/* 2. 矢印の「先端（くの字）」 */
/*
.product-card__btn::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
width: 5px;
height: 5px;
border-top: 1.5px solid #ffffff;
border-right: 1.5px solid #ffffff;
transform: translateY(-50%) rotate(45deg);
transition: right 0.3s ease;
}
*/
/* ホバー時に矢印を少し右に動かす演出（お好みで追加） */
.product-card__btn:hover::before,
.product-card__btn:hover::after {
right: 12px;
}
.product-card__btn:hover {
background-color: #0b2e8a;
}
.product-card__btn .arrow {
font-size: 1rem;
}
/* 右側画像エリア */
.product-card__image-wrapper {
flex-shrink: 0;
width: 80%;
margin: 0 auto;
/* 2列並び用に幅を微調整 */
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.product-card__image {
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* グリッドコンテナ */
.card-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
/* カード要素（高さを100%にして揃える） */
.card-item {
border: 1px solid #ccc;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
overflow: hidden;
/* ★枠からはみ出るのを防ぐ */
}
/* サムネイル画像エリア */
.card-thumb {
height: 220px;
padding: 10px;
background: #fff;
box-sizing: border-box;
}
.card-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/*
.card-thumb {
width: 100%;
height: 250px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.card-thumb img {
max-width: 100%;
height: auto;
object-fit: contain;
}
*/
/* タイトル黒帯 */
.card-header {
text-align: center;
background-color: #000;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 12px 15px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 下部グレーテキスト・ボタンエリア */
.card-body {
background-color: #f7f7f7;
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-desc {
font-size: 14px;
line-height: 1.6;
color: #333;
margin: 0 0 20px 0;
}
/* ボタン */
.card-btn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #0d2259;
color: #fff;
text-decoration: none;
font-size: 14px;
padding: 10px 20px;
border-radius: 2px;
transition: opacity 0.3s, background-color 0.3s;
width: 180px;
margin: 0 auto;
}
.card-btn .btn-arrow {
position: absolute;
right: 15px;
font-size: 14px;
transition: transform 0.3s;
}
.card-btn:hover {
opacity: 0.9;
}
.card-btn:hover .btn-arrow {
transform: translateX(4px);
}
.case-box {
display: flex;
gap: 60px;
align-items: flex-start;
}
.case-image {
width: 45%;
}
.case-image img {
width: 80%;
height: auto;
display: block;
}
.case-image-awt img {
width: 80%;
display: block;
}
.case-content {
width: 55%;
}
.case-title {
background: var(--gray1);
font-size: 2.5rem;
font-weight: 500;
margin: 0 0 20px;
padding: 10px;
padding-bottom: 12px;
border-bottom: 2px solid #233f8f;
}
.case-subtitle {
color: #233f8f;
font-size: 2rem;
margin: 20px 0 20px;
}
.case-text p {
line-height: 1.8;
}
/* 全体コンテナ */
.structure-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 上段：画像2枚並び */
.structure-top-images {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.top-img-box {
flex: 1;
}
.top-img-box img {
width: 100%;
height: auto;
display: block;
}
/* 下段：コンテンツ全体（テキスト＋右下イラスト） */
.structure-content {
display: flex;
align-items: flex-end;
/* イラストを下揃えに配置 */
gap: 30px;
}
/* 左側：テキストブロック */
.structure-text-box {
flex: 1;
}
/* 各項目 */
.structure-item {
margin-bottom: 24px;
}
.structure-item:last-child {
margin-bottom: 0;
}
/* 見出し（✓付き） */
.structure-title {
font-size: 18px;
font-weight: bold;
color: #000000;
margin-top: 0;
margin-bottom: 8px;
position: relative;
padding-left: 24px;
line-height: 1.4;
}
.structure-title::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
/* 説明文 */
.structure-desc {
font-size: 16px;
line-height: 1.6;
color: #000000;
margin: 0;
padding-left: 24px;
/* 見出しの文字位置と揃える */
}
/* 右側：イラスト画像 */
.structure-illust-box {
width: 220px;
/* イラストの固定幅 */
flex-shrink: 0;
}
.structure-illust-box img {
width: 100%;
height: auto;
display: block;
}
/* ------------------------------------------------------
* Footer Contact
------------------------------------------------------ */
.footer-contact {
background: #000;
align-items: center;
display: inline-block;
margin-bottom: 32px;
border: 1px solid #fff;
}
.footer-contact a {
font-size: 1.8rem;
font-weight: var(--fw-mid);
text-decoration: none;
color: #fff;
padding: 0.5em 1em;
}
.footer-contact a::before {
content: "";
background: url(../img/icon/ic_arrow_white.svg) no-repeat left center;
padding: 0 24px 0 0;
}
/* ------------------------------------------------------
* Footer
------------------------------------------------------ */
#footer-area {
position: relative;
background-color: #000;
color: #fff;
font-family: sans-serif;
}
#footer {
padding: 60px 20px 30px;
}
/* 中央寄せ用コンテナ */
.footer-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* ロゴ */
.footer-logo {
margin-bottom: 25px;
}
.footer-logo img {
max-width: 280px;
height: auto;
display: block;
margin: 0 auto;
}
/* 会社情報テキスト */
.footer-info {
color: #fff;
margin-bottom: 30px;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.05em;
}
.footer-info p {
color: #fff;
margin: 0;
}
/* 電話番号リンク（自動生成分も含めて白に固定） */
.footer-info a,
.footer-tel,
a[href^="tel"] {
color: #ffffff !important; /* 白色を強制指定 */
text-decoration: none !important; /* 下線を消去 */
}
/* タップした時の微かなレスポンス（任意） */
.footer-info a:active {
opacity: 0.8;
}
/* 白枠ボタン */
.footer-buttons {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 320px;
margin-bottom: 50px;
}
.footer-btn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
padding: 12px 20px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
transition: background-color 0.3s, color 0.3s;
}
.footer-btn .arrow {
position: absolute;
right: 15px;
font-size: 16px;
transition: transform 0.3s;
}
.footer-btn:hover {
background-color: #fff;
color: #000;
}
.footer-btn:hover .arrow {
transform: translateX(4px);
}
/* コピーライト */
.footer-copy {
font-size: 12px;
color: #ccc;
letter-spacing: 0.05em;
}
/* ページトップボタン */
#pagetop {
position: fixed;
/* 画面の右下に固定表示 */
bottom: 30px;
/* 画面下からの位置（お好みで調整してください） */
right: 20px;
/* 画面右からの位置（お好みで調整してください） */
z-index: 10;
/* 他の要素より前面に表示 */
transform: scale(0.85);
/* 初期状態（非表示） */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
/* スクロールされた時に付与するクラス（表示状態） */
#pagetop.is-show {
opacity: 1;
visibility: visible;
transform: scale(1);
/* 表示時にふわっと少し大きくなる演出 */
}
#pagetop a {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
background-color: #122c60;
/* 円の背景（ネイビー） */
color: #fff;
border: 1px solid #3b5998;
border-radius: 50%;
text-decoration: none;
font-size: 20px;
line-height: 1;
transition: opacity 0.3s, background-color 0.3s;
}
/* ホバー時の演出 */
#pagetop a:hover {
opacity: 0.8;
background-color: #1a3d82;
}
/* PCサイズでの表示微調整 */
@media print,
screen and (min-width: 768px) {
#footer {
padding: 80px 20px 40px;
}
.footer-info {
font-size: 15px;
}
#pagetop {
right: 40px;
bottom: 40px;
}
}
/* ------------------------------------------------------
* Inquiry Fixed
------------------------------------------------------ */
.inquiry-fix {
display: none;
position: fixed;
z-index: 1;
top: calc(50% - 52px);
right: 20px;
transform: translateY(-50%);
}
.inquiry-fix img {
width: 95px;
}
.inquiry-fix a {
transition: 0.3s;
}
.inquiry-fix a:hover {
opacity: 0.8;
}
/* ------------------------------------------------------
* Ebooks Fixed
------------------------------------------------------ */
.ebooks-fix {
display: none;
position: fixed;
z-index: 1;
top: calc(50% + 52px);
right: 20px;
transform: translateY(-50%);
}
.ebooks-fix img {
width: 95px;
}
.ebooks-fix a {
transition: 0.3s;
}
.ebooks-fix a:hover {
opacity: 0.8;
}
main#ebooks~.ebooks-fix {
display: none;
}
/* ------------------------------------------------------
* Clearfix
------------------------------------------------------ */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* ======================================================
* parts_pc.css
* ------------------------------------------------------
* @media print, screen and (min-width: 768px)
* - lead
* - link-anchor
* - headline
* - headline2
* - headline3
* - headline4
* - layout pattern
* - link
* - link-btn
* - Back
* - ul list
* - ol list
* - dl
* - table
* - news list
* - news detail
* - pagination
* - accordion
* - anchor-link
* - video-wrap
* - Ebooks
* - Blogs & Topics
* - about us
* - facility
* - service
* - request-catalog
====================================================== */
/* ---------------------------------------
* lead
--------------------------------------- */
.lead {
font-size: 2.2rem;
font-weight: var(--fw-normal);
text-align: center;
}
/* ---------------------------------------
* headline
------------------------------------------------------ */
.headline {
font-size: 3.6rem;
font-weight: var(--fw-normal);
letter-spacing: .04em;
line-height: 1.53;
margin-bottom: 72px;
padding-bottom: 8px;
text-align: center;
position: relative;
}
.sub_eng {
text-align: center;
margin-top: -80px;
font-size: 1.6rem;
}
.headline_blue {
padding: 5px 20px;
color: #fff;
background: var(--main);
font-size: 2.5rem;
font-weight: var(--fw-normal);
letter-spacing: .04em;
line-height: 1.53;
margin-bottom: 22px;
text-align: center;
position: relative;
}
.headline::after {
background-color: var(--main);
content: "";
height: 2px;
width: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.headline::after {
content: none;
}
.headline.no-line {
padding-bottom: 0;
}
.headline.no-line::after {
display: none;
}
.headline_left {
text-align: left;
}
.headline_left::after {
left: 0;
transform: translateX(0);
}
/* ------------------------------------------------------
* headline2
------------------------------------------------------ */
.headline2 {
color: var(--main);
font-size: 2.3rem;
font-weight: var(--fw-mid);
letter-spacing: .04em;
line-height: 1.8;
margin-bottom: 10px;
}
.headline2 .headline2-s {
display: inline-block;
font-size: 1.6rem;
}
*:not(.headline)+.headline2 {
margin-top: 72px;
}
.headline2_news {
margin-top: 0 !important;
position: relative;
padding-left: 24px;
margin-bottom: 30px;
color: #17384c;
font-size: clamp(2.6rem, 3vw, 4.2rem);
font-weight: 700;
line-height: 1.4;
letter-spacing: .04em;
}
.headline2_news::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 6px;
height: 1.4em;
border-radius: 10px;
background: var(--main);
}
/* ------------------------------------------------------
* headline3
------------------------------------------------------ */
.headline3 {
color: var(--main);
font-size: 1.8rem;
font-weight: var(--fw-mid);
letter-spacing: .04em;
line-height: 1.75;
margin-bottom: 10px;
}
.headline3.line {
border-bottom: 1px solid var(--gray2);
padding-bottom: 6px;
margin-bottom: 15px;
}
*:not(.headline):not(.headline2)+.headline3 {
margin-top: 72px;
}
.headline2+.headline3 {
margin-top: 20px;
}
/* ------------------------------------------------------
* headline4
------------------------------------------------------ */
.headline4 {
font-size: 1.8rem;
font-weight: bold;
margin: 30px 0 10px 0;
}
.headline2+.headline4,
.headline3+.headline4 {
margin-top: 0;
}
html[lang="en"] .headline,
html[lang="en"] .headline2,
html[lang="en"] .headline3 {
letter-spacing: 0;
line-height: 1.4;
}
html[lang="en"] .headline2 {
font-weight: var(--fw-bold);
margin-bottom: 15px;
}
html[lang="en"] .headline2 .headline2-s {
font-weight: var(--fw-mid);
}
/* ------------------------------------------------------
* layout pattern
------------------------------------------------------ */
.caption {
line-height: 1.5 !important;
}
figure img {
height: 350px;
vertical-align: middle;
}
figure+.caption {
font-size: .9em;
margin-top: -.4em;
}
@media print,
screen and (min-width: 768px) {
.right-col {
float: right;
}
.left-col {
float: left;
}
[class*="pattern1-"],
[class*="pattern2-"],
[class*="pattern3-"],
[class*="pattern4-"] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4em;
row-gap: 4em;
}
[class*="pattern1-"] .left-col,
[class*="pattern2-"] .left-col,
[class*="pattern3-"] .left-col {
float: none;
order: 0;
}
[class*="pattern1-"] .right-col,
[class*="pattern2-"] .right-col,
[class*="pattern3-"] .right-col {
float: none;
order: 1;
}
/* ----- pattern1-1 ----- */
.pattern1-1 .left-col,
.pattern1-1 .right-col,
.pattern1-1 .col {
width: 47.91%;
}
.pattern1-1_bts {
width: 100%;
}
.col_bts {
width: 100% !important;
}
/* ----- pattern1-2(2-1) ----- */
.pattern1-2 .left-col,
.pattern2-1 .right-col {
width: 33.333%;
}
.pattern1-2 .right-col,
.pattern2-1 .left-col {
width: 62.5%;
}
/* ----- pattern2-3(3-2) ----- */
.pattern2-3 .left-col,
.pattern3-2 .right-col {
width: 37.5%;
}
.pattern2-3 .right-col,
.pattern3-2 .left-col {
width: 58.333%;
}
/* ----- pattern1-1-1 ----- */
.pattern1-1-1 {
justify-content: flex-start;
column-gap: 4.25%;
}
.pattern1-1-1 .col {
width: 30.5%;
}
/* ----- pattern1-1-1-1 ----- */
.pattern1-1-1-1 {
justify-content: flex-start;
column-gap: 4%;
}
.pattern1-1-1-1 .col {
width: 45%;
}
}
/* ----- åè¦ç´ ã®ä½™ç™½èª¿æ•´ ----- */
[class*="pattern"] [class*="col"]:last-of-type,
[class*="pattern"] [class*="col"]> :last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------
* link
------------------------------------------------------ */
.link,
ul.link-list li {
font-size: 1.6rem;
line-height: 1.6;
margin-top: 1rem;
}
.link-wrap {
margin-top: 50px;
}
.link-inner {
position: relative;
display: inline-block;
}
ul.link-list li {
position: relative;
}
.link .link-inner,
ul.link-list li {
padding: 0 0 0 30px;
}
.link .link-inner::before,
ul.link-list li::before {
position: absolute;
top: 0;
left: 0;
width: 23px;
height: 100%;
content: "";
background: url("../img/icon/ic_arrow.svg") no-repeat center center;
background-size: 23px;
}
.link-inner.link-back::before {
transform: scaleX(-1);
}
.link-inner a,
ul.link-list li a {
background: linear-gradient(#000, #000) 1px 100%/100% 1px no-repeat;
transition: all .3s;
}
.link-inner a:hover,
ul.link-list li a:hover {
background-size: 100% 0px;
}
a.txt-link {
text-decoration: underline;
}
a.txt-link:hover {
text-decoration: none;
}
/* ------------------------------------------------------
* link-btn
------------------------------------------------------ */
.link-btn {
background-color: var(--main);
display: inline-block;
font-size: 1.6rem;
line-height: 1.6;
border-radius: 25px;
}
.center-position .link-btn {
display: inline-block;
}
.link-btn a {
border: 1px solid var(--main);
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
font-weight: var(--fw-mid);
letter-spacing: .04em;
line-height: 1.5;
padding: .5em 1em;
min-height: 45px;
min-width: 206px;
position: relative;
z-index: 0;
transition: .4s;
transition-delay: .2s;
border-radius: 25px;
}
html[lang="en"] .link-btn a {
letter-spacing: 0;
}
.link-btn a::before {
background: #fff;
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
z-index: -1;
border-radius: 25px;
}
.link-btn.btn-white {
background-color: transparent;
}
.link-btn.btn-white a {
color: var(--main);
}
/* ------------------------------------------------------
* Back
------------------------------------------------------ */
.back {
text-align: center;
}
.back-inner {
position: relative;
display: inline-block;
padding: 0 35px;
}
.back-inner::before {
position: absolute;
top: 2px;
left: 0;
width: 30px;
height: 100%;
content: "";
transform: rotate(-180deg);
background: url("../img/icon/ic_arrow.svg") no-repeat center center;
background-size: 30px;
}
.back-inner a {
position: relative;
}
.back-inner a::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
content: "";
transition: 0.3s;
background: var(--normal);
}
.back-inner a:hover::before {
background: none;
}
/* ------------------------------------------------------
* ul list
------------------------------------------------------ */
ul.list {
margin-top: .7em;
}
ul.list>li,
ul.list ul li {
line-height: 1.7;
position: relative;
padding-left: 1em;
list-style-type: none;
}
ul.list>li:before,
ul.list ul li::before {
position: absolute;
top: 0.7em;
left: .2em;
display: block;
width: 6px;
height: 6px;
content: "";
border-radius: 50%;
background: var(--main);
}
ul.list li+li,
ul.list ul,
ul.list ol {
margin-top: .3em;
}
ul.list li>*:last-child {
margin-bottom: 0 !important;
}
/* ------------------------------------------------------
* ol list
------------------------------------------------------ */
ol.list {
margin-top: .7em;
counter-reset: li;
}
ol.list>li,
ol.list ol>li {
line-height: 1.7;
list-style: none;
padding-left: 2em;
position: relative;
}
ol.list>li:before,
ol.list ol>li::before {
position: absolute;
top: 0;
left: .2em;
content: counter(li) ".";
counter-increment: li;
color: var(--main);
}
ol.list li+li,
ol.list ol,
ol.list ul {
margin-top: .3em;
}
ol.list li>*:last-child {
margin-bottom: 0 !important;
}
/* ------------------------------------------------------
* dl
------------------------------------------------------ */
dl dt,
dl dt[class*="headline"] {
font-weight: var(--fw-mid);
border-color: var(--gray2);
border-style: solid;
border-width: 0 0 1px;
padding-bottom: .4em;
margin-bottom: .8em;
}
/* ------------------------------------------------------
* table
------------------------------------------------------ */
table.table {
background: #fff;
border-spacing: 0;
border-collapse: collapse;
border-color: #000;
border-style: solid;
border-width: 1px 1px 0 0;
width: 100%;
}
table.table th,
table.table td {
border-color: #000;
border-style: solid;
border-width: 0 0 1px 1px;
padding: 0.5em;
}
html[lang="en"] table.table th,
html[lang="en"] table.table td {
line-height: 1.7;
}
table.table th {
background: var(--gray1);
font-weight: bold;
text-align: left;
}
table.table .sub-head {
background-color: #E6F1F8;
color: var(--normal);
font-weight: var(--fw-normal);
}
/* テーブル全体のスタイル */
.table-wrapper {
width: 100%;
overflow-x: auto;
/* 画面からはみ出たら横スクロール */
-webkit-overflow-scrolling: touch;
/* iOSでのスクロールを滑らかにする */
margin-bottom: 20px;
}
.spec-table {
width: 100%;
/* 横幅いっぱいに広げる */
border-collapse: collapse;
/* 枠線を1本にする */
font-family: sans-serif;
/* フォント（ゴシック体系） */
font-size: 14px;
/* 文字サイズ（適宜調整してください） */
border: 1px solid #000;
/* 外枠 */
}
/* ヘッダーセルのスタイル */
.spec-table thead th {
background-color: #2b3a7b;
/* 濃い青色の背景 */
color: #fff;
/* 白文字 */
font-weight: normal;
/* 文字の太さを通常に（画像合わせ） */
text-align: left;
/* 左寄せ */
padding: 12px 15px;
/* 上下・左右の余白 */
border: 1px solid #000;
/* セルの枠線 */
}
/* ボディセルの共通スタイル */
.spec-table tbody td {
color: #000;
/* 黒文字 */
padding: 12px 15px;
/* 上下・左右の余白 */
border: 1px solid #000;
/* セルの枠線 */
vertical-align: middle;
/* 縦方向の中央揃え */
}
/* ------------------------------------------------------
* news list
------------------------------------------------------ */
.info-area ul li {
border-bottom: 1px solid #CCC;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 1.1em .7em 1em;
}
.info-area ul li:first-of-type {
padding-top: 0;
}
.info-area .date-cate {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.info-area .date-cate .date {
width: 8.4em;
line-height: 1.4;
}
.info-area .date-cate .cate {
background-color: var(--main);
color: #FFF;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
padding: .25em .3em .3em;
text-align: center;
width: 120px;
}
.info-area ul li .title {
padding-left: 1.2em;
width: calc(100% - 8.4em - 120px);
position: relative;
top: -3px;
}
/* ボタンを横並びに配置するスタイル */
.btn-group {
display: flex;
justify-content: center;
gap: 20px;
/* ボタン同士の間隔 */
margin-top: 40px;
/* 記事リストとの余白 */
}
/* ------------------------------------------------------
* news detail
------------------------------------------------------ */
.news-detail-area {
margin-bottom: 70px;
}
.news-detail-area>*:last-child {
margin-bottom: 0 !important;
}
.news-detail-area *:not(.link):not(.link-inner) a {
color: var(--main);
text-decoration: underline;
}
.news-detail-area p {
line-height: 1.8;
margin-bottom: 2em;
}
.news-detail-area .date-cate {
margin-bottom: 18px;
}
.news-detail-area h2 {
border-bottom: 2px solid #000;
font-size: 3.1rem;
font-weight: bold;
line-height: 1.7;
margin-bottom: 1.4em;
padding: 18px 0 20px;
text-align: left;
}
.news-detail-area h2::after {
display: none;
}
.news-detail-area h3 {
margin-bottom: .9em;
}
.news-detail-area :not(h2)+h3 {
margin-top: 2em;
}
.news-detail-area h4 {
margin-bottom: .9em;
}
.news-detail-area .link,
.news-detail-area ul.list,
.news-detail-area ol.list,
.news-detail-area table.table {
margin: 0 0 2em;
}
/* ------------------------------------------------------
* pagination
------------------------------------------------------ */
#pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
#pagination button {
margin: 0 10px;
padding: 8px 12px;
background-color: var(--main);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#pagination button:disabled {
background-color: #aaa;
cursor: default;
}
#pagination ul {
display: flex;
align-items: baseline;
}
#pageNumbers span {
cursor: pointer;
margin: 0px 10px;
color: var(--main);
}
#pageNumbers span.active {
font-weight: bold;
text-decoration: underline;
}
/* ------------------------------------------------------
* scroll-box
------------------------------------------------------ */
.scroll-box {
margin-bottom: 1.5em;
min-width: 500px;
overflow-x: scroll;
}
.scroll-box table {
margin-bottom: 15px;
}
.scroll-box.scroll-hint table {
white-space: nowrap;
}
@keyframes scroll-hint-appear {
0% {
transform: translateX(40px);
opacity: 0;
}
10% {
opacity: 1;
}
50%,
100% {
transform: translateX(-40px);
opacity: 0;
}
}
.scroll-hint.is-right-scrollable {
background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint.is-right-scrollable.is-left-scrollable {
background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint.is-left-scrollable {
background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint-icon {
position: absolute;
top: calc(50vh - 25px);
left: calc(50% - 60px);
box-sizing: border-box;
width: 120px;
height: 80px;
border-radius: 5px;
transition: opacity .3s;
opacity: 0;
background: rgba(0, 0, 0, .7);
text-align: center;
padding: 20px 10px 10px 10px;
}
.scroll-hint-icon-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
pointer-events: none;
}
.scroll-hint-text {
font-size: 10px;
color: #FFF;
margin-top: 5px;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
opacity: .8;
}
.scroll-hint-icon:before {
display: inline-block;
width: 40px;
height: 40px;
color: #FFF;
vertical-align: middle;
text-align: center;
content: "";
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon:after {
content: "";
width: 34px;
height: 14px;
display: block;
position: absolute;
top: 10px;
left: 50%;
margin-left: -20px;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
opacity: 0;
transition-delay: 2.4s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
opacity: 1;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
animation: scroll-hint-appear 1.2s linear;
animation-iteration-count: 2;
}
.scroll-hint-icon-white {
background-color: #FFF;
box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.scroll-hint-icon-white:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon-white:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}
.scroll-hint-icon-white .scroll-hint-text {
color: #000;
}
.news-detail-area+.link-btn {
margin: 0 auto;
width: 80%;
max-width: 392px;
}
/* ------------------------------------------------------
* accordion
------------------------------------------------------ */
dl.accordion {
border-bottom: 1px solid var(--gray2);
}
dl.accordion dt {
border-width: 1px 0 0;
color: var(--main);
cursor: pointer;
font-size: 2.3rem;
letter-spacing: .04em;
line-height: 1.4;
margin: 0;
padding: 24px 60px 24px 8px;
position: relative;
}
html[lang="en"] dl.accordion dt {
letter-spacing: 0;
}
dl.accordion dt .icon {
height: 16px;
width: 16px;
position: absolute;
top: 30px;
right: 20px;
transition: .4s;
}
dl.accordion dt .icon::before,
dl.accordion dt .icon::after {
background-color: #666;
content: "";
height: 16px;
width: 3px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
dl.accordion dt .icon::after {
transform: rotate(90deg);
}
dl.accordion dt.open .icon {
transform: rotate(-45deg);
}
dl.accordion dd {
display: none;
margin-top: -8px;
padding: 0 8px 24px;
}
dl.accordion .box.bgc-gray {
line-height: 1.7;
padding: 16px;
}
/* ------------------------------------------------------
* anchor-link
------------------------------------------------------ */
.anchor-link ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.anchor-link li {
height: 70px;
width: calc(100% / 3);
position: relative;
margin-bottom: 0.5em;
}
@media print,
screen and (min-width: 768px) {
.anchor-link li:nth-of-type(3n+1)::before {
display: none;
}
}
.anchor-link li a {
display: block;
padding: 1em 1.5em;
text-align: center;
position: relative;
background-color: var(--gray1);
color: var(--main);
margin: 0 16px;
font-weight: var(--fw-mid);
align-items: center;
justify-content: space-between;
padding: 20px 40px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
transition: all .3s ease;
}
/* 横線 */
.arrow::before {
content: "";
position: absolute;
top: 50%;
right: 5%;
width: 23px;
height: 2px;
background: #fff;
transform: translateY(-50%);
}
/* 矢印部分 */
.arrow::after {
content: "";
position: absolute;
top: 50%;
right: 5%;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translateY(-50%) rotate(45deg);
}
.btn-outline:hover .arrow {
transform: translateX(8px);
}
.anchor-link li a:hover {
background: #005cb9;
border-color: #005cb9;
color: #fff;
}
html[lang="en"] .anchor-link li a {
letter-spacing: 0;
}
.anchor-link li a::before {
background: url(../img/icon/ic_arrow.svg) no-repeat;
content: "";
height: 24px;
width: 24px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 35px;
}
/* ------------------------------------------------------
* scrollable-table
------------------------------------------------------ */
.scrollable-table {
overflow-x: scroll;
white-space: nowrap;
}
.scrollable-table::-webkit-scrollbar {
width: 12px;
}
.scrollable-table::-webkit-scrollbar-thumb {
background-color: darkgray;
border-radius: 6px;
}
/* ------------------------------------------------------
* form-area
------------------------------------------------------ */
.form-area div.row {
border-bottom: 1px solid #E0E0E0;
display: flex;
align-items: stretch;
width: 100%;
position: relative;
}
.form-area div.cell1,
.form-area div.cell2 {
line-height: 1.5;
vertical-align: top;
}
.form-area div.cell1 {
color: var(--main);
font-weight: var(--fw-mid);
padding: 25px 17px 25px 0;
width: 260px;
position: relative;
min-height: 80px;
font-size: 16px;
}
.form-area div.cell2 {
padding: 25px 25px 25px;
width: calc(100% - 260px);
}
.form-area div.cell1 .required {
background-color: var(--error);
color: #FFF;
display: inline-block;
font-size: 13px;
letter-spacing: 3px;
line-height: 24px;
padding-left: 3px;
text-align: center;
width: 53px;
position: absolute;
top: 25px;
right: 29px;
}
.form-area div.cell2>*:last-child {
margin-bottom: 0 !important;
}
.form-area p.caution {
font-size: 14px !important;
margin-top: .5em;
}
.form-area p.caution::before {
color: var(--norml);
}
.form-area input,
.form-area select,
.form-area textarea {
font-family: var(--gothic);
font-size: 15px;
}
.form-area input[type="text"],
.form-area input[type="email"],
.form-area input[type="tel"] {
-webkit-appearance: none;
background-color: var(--light);
border: 1px solid var(--sub);
border-radius: 0;
box-shadow: 2px 2px 5px 0 var(--sub) inset;
height: 38px;
padding: 0 0.5em;
width: 100%;
}
.form-area input::placeholder {
color: #666;
font-size: 15px;
}
.form-area input.text-s {
width: 230px;
}
.form-area input.text-s {
width: 230px;
}
.form-area textarea {
-webkit-appearance: none;
background-color: var(--light);
border: 1px solid var(--sub);
border-radius: 0;
box-shadow: 2px 2px 5px 0 var(--sub) inset;
line-height: 1.8;
height: auto;
min-height: 150px;
padding: .5em;
resize: vertical;
width: 100%;
margin: 0;
}
.form-area .zipcode {
min-width: 300px;
max-width: 95%;
}
.form-area select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: var(--light) url(../img/icon/icon_arrow.svg) no-repeat right -1px top -1px / auto calc(100% + 2px);
border: 1px solid var(--sub);
box-shadow: 2px 2px 5px 0 var(--sub) inset;
color: #666;
height: 2.5em;
min-width: 300px;
max-width: 95%;
padding: 0 40px 0 .5em;
border-radius: 0 !important;
}
#main-content select::-ms-expand {
display: none;
}
.form-area select::-ms-expand {
display: none;
}
.form-area ul.form-checkbox,
.form-area ul.form-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
row-gap: 1em;
}
.form-area ul.form-checkbox li,
.form-area ul.form-list li {
min-width: calc(100% / 4);
}
.form-area input[type="radio"],
.form-area input[type="checkbox"] {
display: inline-block;
margin-right: .5em;
}
.form-area input[type="radio"]~label,
.form-area input[type="checkbox"]+label,
.form-area input[type="checkbox"]~[class*="label"] {
position: relative;
display: inline-block;
margin-right: 1em;
line-height: 1.4;
vertical-align: middle;
cursor: pointer;
}
@media (min-width: 1px) {
/* 〜IE8は適用外*/
.form-area input[type="radio"],
.form-area input[type="checkbox"] {
display: none;
margin: 0;
}
.form-area input[type="radio"]~label,
.form-area input[type="checkbox"]+label,
.form-area input[type="checkbox"]~[class*="label"] {
padding: 0 0 0 26px;
}
.form-area input[type="radio"]~label::before,
.form-area input[type="checkbox"]+label::before,
.form-area input[type="checkbox"]~[class*="label"]::before {
background: #FFF;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.form-area input[type="radio"]~label::before {
background-color: var(--light);
border: 1px solid var(--sub);
border-radius: 30px;
box-shadow: 2px 2px 5px 0 var(--sub) inset;
height: 18px;
width: 18px;
top: calc((1.4em - 18px) / 2);
bottom: auto;
}
.form-area input[type="checkbox"]+label::before,
.form-area input[type="checkbox"]~[class*="label"]::before {
background-color: var(--light);
border: 1px solid var(--sub);
box-shadow: 2px 2px 5px 0 var(--sub) inset;
height: 16px;
width: 16px;
}
.form-area input[type="radio"]:checked~label::after,
.form-area input[type="checkbox"]:checked+label::after,
.form-area input[type="checkbox"]:checked~[class*="label"]::after {
content: "";
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: absolute;
top: 50%;
}
.form-area input[type="radio"]:checked~label::after {
background: var(--main);
border-radius: 8px;
height: 8px;
width: 8px;
left: 5px;
top: calc((1.4em - 8px) / 2);
bottom: 0;
}
.form-area input[type="checkbox"]:checked+label::after,
.form-area input[type="checkbox"]:checked~[class*="label"]::after {
left: 2px;
width: 12px;
height: 7px;
margin-top: -8px;
border-left: 3px solid var(--main);
border-bottom: 3px solid var(--main);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: calc(50% + 3px);
}
}
.form-area.error input,
.form-area.error textarea,
.form-area.error select,
.form-area input.inputError,
.form-area textarea.inputError,
.form-area select.inputError {
border: 2px solid var(--error);
}
.form-area div.error-msg {
color: var(--error);
font-weight: var(--fw-mid);
line-height: 1.5;
margin-bottom: .5em;
}
.form-area div.error-msg~input,
.form-area div.error-msg~textarea {
border: 2px solid var(--error);
}
.form-area .form-btn {
background-color: var(--light);
border: 1px solid var(--main);
overflow: hidden;
position: relative;
font-weight: var(--fw-mid);
}
.form-btn button {
background: transparent;
border: none;
color: var(--main);
cursor: pointer;
font-family: var(--gothic);
font-size: 18px;
font-weight: var(--fw-mid);
letter-spacing: .02em;
line-height: 1.2;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.form-btn button::before {
background-color: #FFF;
border-radius: 100%;
content: "";
height: 30px;
width: 30px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.form-btn button::after {
border-color: var(--main);
border-style: solid;
border-width: 1px 1px 0 0;
content: "";
height: 6px;
width: 6px;
position: absolute;
top: calc((100% - 6px) / 2);
right: 33px;
transform: rotate(45deg);
}
.form-btn button:not(:disabled):hover {
background-color: var(--main);
color: #fff !important;
}
.form-btn.btn-confirm {
border-radius: 40px;
height: 80px;
width: 380px;
margin: 0 auto;
}
.form-btn.btn-confirm button {
letter-spacing: .05em;
font-size: 22px;
padding: 0 20px 5px 0;
}
.form-btn.btn-confirm button span {
display: block;
font-size: 15px;
font-weight: var(--fw-normal);
letter-spacing: .05em;
margin-bottom: .2em;
}
.form-btn.btn-confirm button:disabled {
cursor: default;
opacity: 0.5;
}
.form-btn button.btn-back::before {
left: 20px;
right: auto;
}
.form-btn button.btn-back::after {
border-width: 0 0 1px 1px;
left: 33px;
right: auto;
}
.form-area .form-btn-area {
display: flex;
justify-content: center;
align-items: stretch;
}
.form-btn-area .form-btn {
border-radius: 30px;
margin: 0 40px 0 0;
height: 60px;
width: 300px;
}
.form-btn-area .form-btn:last-child {
margin-right: 0;
}
.form-area .error-box p {
border: 2px solid var(--error);
font-size: 20px;
font-weight: var(--fw-bold);
padding: 25px 25px;
text-align: center;
}
.form-area .error-box {
color: var(--error);
}
.form-area .upload-btn {
display: inline-block;
padding: 8px 16px;
background-color: var(--main);
color: #fff;
border-radius: 4px;
cursor: pointer;
font-weight: var(--fw-min);
text-align: center;
}
/* ------------------------------------------------------
* video-wrap
------------------------------------------------------ */
.video-wrap {
width: 100%;
position: relative;
}
.video-wrap video {
height: 100%;
width: 100%;
object-fit: cover;
}
/* ------------------------------------------------------
* Ebooks
------------------------------------------------------ */
#ebooks .headline {
border-bottom-width: 0;
font-size: 3.2rem;
}
.ebooks-pattern {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px 0;
}
.ebooks-pattern+.ebooks-pattern {
border-color: #CCC;
border-style: solid;
border-width: 1px 0 0;
margin-top: -1px;
}
.ebooks-pattern .img-col {
width: 37.5%;
}
.ebooks-pattern .col {
width: calc(100% - 4.16% - 37.5%);
}
/* ------------------------------------------------------
* Request for materials
------------------------------------------------------ */
.request-pattern {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.request-pattern .col {
width: 58.33%;
}
.request-pattern .col-form {
background-color: #ebf3f9;
padding: 30px 2.5% 50px;
width: 37.5%;
}
#ebooks-thanks h3 {
font-size: 3.8rem;
margin-bottom: 1.5em;
text-align: center;
}
#request-email {
font-size: 2.0rem;
font-weight: bold;
margin: 50px 0 80px;
text-align: center;
}
#request-email .no-spam {
display: none;
}
#ebooks-download .download-btn,
#form .download-btn {
margin: 42px 0 68px;
}
.link-btn.download-btn a {
flex-wrap: wrap;
column-gap: .7em;
font-size: 1.9rem;
max-width: 320px;
line-height: 1.6;
padding: .8em 1em;
}
.download-btn .size {
font-size: 1.6rem;
letter-spacing: .04em;
line-height: 2;
}
.download-btn .ai-pdf::after {
vertical-align: middle;
transform: initial;
}
a.underline {
text-decoration: underline;
}
a.underline:hover {
text-decoration: none;
}
/* ------------------------------------------------------
* Blogs & Topics
------------------------------------------------------ */
.blogs-list:not(.slider) {
display: flex;
flex-wrap: wrap;
column-gap: clamp(20px, 3.12vw, 45px);
row-gap: 55px;
}
.blogs-list:not(.slider) .blog-box {
border-bottom: 1px solid #CCC;
width: calc((100% - (45px * 2)) / 3);
padding-left: 15px;
}
.blogs-list .blog-box {
background-color: #FFF;
position: relative;
}
.blog-box a {
display: block;
padding-bottom: 50px;
}
.blog-box figure {
display: flex;
justify-content: center;
align-items: center;
height: 13.88vw;
margin-bottom: 0;
overflow: hidden;
max-height: 200px;
}
.blog-box figure img {
width: 100%;
transition: .5s;
object-fit: cover;
}
.blog-box a:hover figure img {
transform: scale(1.1);
}
.blog-box a>div:not([class*="icon-"]) {
padding: 30px 0;
}
.blog-box [class*="icon-"] {
font-size: clamp(1.3rem, 1.04vw, 1.5rem);
color: #FFF;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
height: clamp(2em, 2.43vw, 35px);
width: clamp(65px, 6.25vw, 90px);
transition: .3s;
position: absolute;
top: clamp(10px, 1.38vw, 20px);
left: 0;
}
.blog-box .icon-new {
background-color: var(--sub);
}
.blog-box .icon-pickup {
background-color: var(--sub);
}
.blog-box .date-cate {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog-box .date-cate .date {
margin: 0 10.6% 0 0;
}
.blog-box .date-cate .cate {
background-color: var(--main);
color: #FFF;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.6;
margin: 0;
padding: 1px 0 2px;
text-align: center;
width: 40%;
}
.blog-box .title {
font-weight: 600;
line-height: 1.6;
margin-top: .5em;
}
html[lang="ja"] .blog-box .title {
font-weight: 400;
}
.blog-box .read {
font-weight: 500;
padding-right: calc(23px + .7em);
text-align: right;
width: 100%;
position: absolute;
bottom: 20px;
left: 0;
}
.blog-box .read::before {
background: url("../img/icon/ic_arrow.svg") no-repeat center center;
background-size: 30px;
content: "";
height: 100%;
width: 30px;
position: absolute;
top: 1px;
right: 0;
}
html[lang="ja"] .blog-box .read {
font-size: 1.5rem;
}
.pagenation {
margin-top: 80px;
}
.pagenation ul {
display: flex;
align-items: center;
justify-content: center;
}
.pagenation ul li {
margin: 0 .2em;
}
.pagenation ul li a {
font-size: 2.0rem;
font-weight: 600;
line-height: 1;
padding: 0 .5em;
vertical-align: middle;
}
.pagenation ul li:not(.active) a {
color: var(--main);
}
.pagenation ul li.prev a img,
.pagenation ul li.next img {
width: 12px;
}
.pagenation ul li.prev a img {
transform: scaleX(-1);
}
/* ------------------------------------------------------
* about us
------------------------------------------------------ */
#about .logo-regenet {
padding: 18px 20px;
}
#about .logo-jtec {
padding: 10px 0;
}
#about .result-wrap {
background-color: rgba(14, 74, 119, .68);
margin-top: 80px;
overflow: hidden;
position: relative;
}
#about .result-wrap::before {
background-image: url("/ja/about-us/img/index_bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
filter: blur(5px);
height: 101%;
width: 101%;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}
#about .result-wrap .inner {
color: #FFF;
padding-top: 80px;
padding-bottom: 80px;
}
#about .result-wrap h3 {
color: #FFF;
text-align: center;
}
#about .result-wrap .pattern1-1 {
row-gap: 54px;
margin-bottom: 0;
}
#about .result-wrap .col {
border: 1px solid #FFF;
padding: 0 30px 32px;
}
#about .result-wrap h4 {
background-color: #FFF;
color: var(--dark);
font-size: 2.0rem;
font-weight: var(--fw-mid);
letter-spacing: .04em;
line-height: 2.4;
margin: -24px auto 36px;
max-width: 280px;
text-align: center;
}
html[lang="en"] #about .result-wrap h4 {
letter-spacing: 0;
}
#about .result-wrap ul li::before {
background-color: #FFF;
}
/* ------------------------------------------------------
* facility
------------------------------------------------------ */
#facility>.inner {
position: relative;
}
#facility h2 {
font-size: 2.6rem;
letter-spacing: .04em;
line-height: 1.7;
position: absolute;
top: 0;
left: 20px;
z-index: 1;
}
html[lang="en"] #facility h2 {
letter-spacing: 0;
}
.facility-map {
margin: 0 auto 80px;
padding-top: 40px;
max-width: 1008px;
position: relative;
}
.facility-map figure {
margin: 0 auto;
max-width: 55.85%;
}
.facility-anchor {
background-color: #E6F1F8;
position: absolute;
}
.facility-anchor a {
display: block;
padding: clamp(10px, 1.9vw, 20px) clamp(30px, 6.4vw, 65px) clamp(10px, 1.9vw, 20px) clamp(15px, 2.9vw, 30px);
}
.facility-anchor .head {
color: #0471AF;
font-size: clamp(1.6rem, 1.98vw, 2.0rem);
font-weight: var(--fw-mid);
line-height: 1.3;
margin-bottom: .65em;
min-width: clamp(133px, 26.28vw, 265px);
}
.facility-anchor p {
font-weight: var(--fw-bold);
line-height: 1.5;
font-size: clamp(1.3rem, 1.58vw, 1.6rem);
}
.facility-anchor p span {
font-size: clamp(1.1rem, 1.38vw, 1.4rem);
font-weight: var(--fw-normal);
line-height: 1.7;
}
.facility-anchor .arrow {
background-color: var(--main);
height: clamp(36px, 4.76vw, 48px);
width: clamp(36px, 4.76vw, 48px);
position: absolute;
top: 50%;
right: clamp(-18px, -2.38vw, -24px);
transform: translateY(-50%);
z-index: 0;
transition: .4s;
}
.facility-anchor .arrow::before {
background-image: url("../img/icon/ic_arrow_white.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
height: 20px;
width: 30px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotate(90deg);
}
.facility-anchor.kashiwa {
top: clamp(184px, 25.59vw, 258px);
right: 24px;
}
html[lang="en"] .facility-anchor.kashiwa {
top: clamp(174px, 24.59vw, 248px);
}
.facility-anchor.iwakuni {
top: clamp(178px, 24.8vw, 250px);
left: 0;
}
html[lang="en"] .facility-anchor.iwakuni {
top: clamp(153px, 22vw, 225px);
}
.facility-anchor.jtec {
bottom: clamp(67px, 9.42vw, 95px);
left: 50%;
}
.facility-anchor a:hover .head span {
text-decoration: underline;
}
.facility-anchor a:hover .arrow {
background-color: var(--sub);
}
.facility-dtl {
border-top: 1px solid var(--gray2);
padding: 50px 0;
}
.facility-dtl> :last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------
* service
------------------------------------------------------ */
.service-list .col dt {
color: var(--main);
display: flex;
align-items: center;
font-size: clamp(2.0rem, 1.91vw, 2.3rem);
line-height: 1.4;
min-height: 4em;
}
.catalog-bnr {
background-color: var(--dark);
height: 230px;
}
.catalog-bnr .inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.catalog-bnr h2 {
border-left: 7px solid var(--main);
color: #FFF;
display: flex;
align-items: center;
font-size: clamp(2.2rem, 2.66vw, 3.2rem);
min-height: 46px;
padding-left: clamp(25px, 3.25vw, 39px);
line-height: 1.7;
}
.catalog-bnr .link-btn {
background-color: transparent;
font-size: clamp(1.8rem, 1.83vw, 2.2rem);
max-width: 370px;
width: 45%;
}
.catalog-bnr .link-btn a {
border-color: #FFF;
height: clamp(45px, 5.83vw, 70px);
}
.catalog-bnr .link-btn a::after {
background-image: url("../img/icon/ic_arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
height: 20px;
width: 30px;
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
}
/* ------------------------------------------------------
* request-catalog
------------------------------------------------------ */
#catalog h2 {
font-size: 1.8rem;
line-height: 1.77;
text-align: center;
margin-bottom: 60px;
}
#catalog form .required {
background-color: var(--error);
color: #FFF;
display: inline-block;
font-size: 1.1rem;
line-height: 2;
margin-left: 1em;
text-align: center;
width: 38px;
}
#catalog .agree-check label {
padding-left: calc(2em + 48px);
text-indent: -48px;
}
html[lang="en"] #catalog .agree-check label {
padding-left: calc(.7em + 18px);
text-indent: 0;
}
#catalog .agree-check label::before {
top: .2em;
}
#catalog .agree-check label .required {
text-indent: 0;
}
#catalog table.form-request.confirmation {
max-width: 800px;
margin: 0 auto 50px;
border-top: 1px solid var(--gray2);
}
#catalog table.form-request.confirmation tr {
display: flex;
border-bottom: 1px solid var(--gray2);
}
#catalog table.form-request.confirmation tr th {
width: 230px;
background: none;
padding: 2rem 1rem;
}
#catalog table.form-request.confirmation tr td {
width: calc(100% - 230px);
padding: 2rem .5rem 2rem 3rem;
}
html:not([lang="en"]) #catalog table.form-request.confirmation .form-table-ttl {
justify-content: space-between;
}
#catalog .form-btn button.back {
border: 1px solid #d9d9d9;
}
#catalog .form-btn button.back {
background: #fff;
border: 1px solid var(--main);
color: var(--main);
}
#catalog .form-btn button.back::before {
background: var(--main);
top: -1px;
height: calc(100% + 1px);
}
#catalog .form-btn button.back span {
color: var(--main);
}
#catalog .form-btn button.back:hover span {
color: #fff !important;
}
/* ------------------------------------------------------
* サイトマップ
------------------------------------------------------ */
.sitemap-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}
.sitemap-category {
background-color: #f9f9f9;
padding: 24px;
border-radius: 8px;
}
.sitemap-category-title {
color: var(--main);
font-weight: bold;
border-bottom: 2px solid var(--main);
padding-bottom: 8px;
margin-bottom: 16px;
}
.sitemap-list {
list-style: none;
padding: 0;
margin: 0;
}
.sitemap-list li {
margin-bottom: 10px;
}
.sitemap-list li:last-child {
margin-bottom: 0;
}
.sitemap-list a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}
.sitemap-list a:hover {
color: #0066cc;
}
/* ------------------------------------------------------
* 会社情報
------------------------------------------------------ */
/* リスト全体の余白調整 */
.ba-list {
list-style: none;
padding: 0;
margin: 0;
}
.ba-list li {
margin-bottom: 8px;
font-size: 13px;
line-height: 1.4;
}
/* 各リンク（ボタン風のデザインへ変更） */
.ba-list li a {
color: #0056b3;
/* 全体をリンクらしい青色に変更 */
display: inline-flex;
align-items: center;
transition: all 0.2s ease;
/* ホバー時の滑らかな動き */
font-weight: 500;
}
/* 先頭の矢印アイコン */
.ba-list li a::before {
content: "›";
/* 青い矢印マーク */
color: #0056b3;
font-size: 18px;
font-weight: bold;
margin-right: 6px;
line-height: 1;
transition: transform 0.2s ease;
}
/* マウスをのせた時の演出（ホバー効果） */
.ba-list li a:hover {
color: #003366;
/* 少し濃い青色へ変化 */
transform: translateX(4px);
/* 右に少し動いてクリック感を強調 */
}
.ba-list li a:hover::before {
transform: translateX(2px);
/* 矢印も連動して動く */
}
/* 全体設定 */
.company_origin {
font-family: sans-serif;
color: #333333;
line-height: 1.6;
}
/* 青色ヘッダーバー */
.company_origin_header {
background-color: #2b438b;
color: #ffffff;
padding: 8px 16px;
font-weight: bold;
font-size: 16px;
margin-bottom: 24px;
}
/* 左側に青線のついた見出し */
.company_section_title {
font-size: 20px;
color: #2b438b;
border-left: 5px solid #2b438b;
padding-left: 12px;
margin-bottom: 24px;
font-weight: normal;
}
/* 上部メッセージエリア（横並び） */
.company_message_box {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 40px;
}
.company_logo_wrapper {
width: 120px;
flex-shrink: 0;
border-right: 1px solid #e0e0e0;
padding-right: 30px;
}
.company_logo_img {
width: 100%;
height: auto;
display: block;
}
.company_catchphrase {
font-size: 18px;
color: #333333;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}
.company_text {
font-size: 14px;
color: #555555;
}
/* 下部ストーリーエリア（背景グレー） */
.company_story_wrapper {
background-color: #f5f5f5;
padding: 30px 20px;
}
.company_story_box {
display: flex;
gap: 40px;
margin-top: 20px;
}
.company_founder_image {
width: 280px;
flex-shrink: 0;
}
.company_founder_image img {
width: 100%;
height: auto;
display: block;
}
.company_founder_info {
flex-grow: 1;
}
.company_founder_name {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #333333;
}
/* 経歴タイムライン */
.company_timeline {
list-style: none;
padding: 0;
margin: 0;
}
.company_timeline_item {
display: flex;
position: relative;
padding-left: 20px;
margin-bottom: 12px;
font-size: 14px;
}
/* 青い丸ポチの再現 */
/* CSS: お使いのCSSファイルに追加してください */
/* 全体設定 */
.company_origin {
font-family: sans-serif;
color: #333333;
line-height: 1.6;
}
/* 青色ヘッダーバー */
.company_origin_header {
background-color: var(--main);
color: #ffffff;
padding: 8px 16px;
font-weight: bold;
font-size: 2rem;
margin-bottom: 24px;
}
/* 左側に青線のついた見出し */
.company_section_title {
font-size: 20px;
color: #2b438b;
border-left: 5px solid #2b438b;
padding-left: 12px;
margin-bottom: 24px;
font-weight: normal;
}
/* 上部メッセージエリア（横並び） */
.company_message_box {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 40px;
}
.company_logo_wrapper {
width: 120px;
flex-shrink: 0;
border-right: 1px solid #e0e0e0;
padding-right: 30px;
}
.company_logo_img {
width: 100%;
height: auto;
display: block;
}
.company_catchphrase {
font-size: 18px;
color: #333333;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}
.company_text {
font-size: 14px;
color: #555555;
}
/* 下部ストーリーエリア（背景グレー） */
.company_story_wrapper {
max-width: calc(var(--max) + 40px);
margin: 0 auto;
background-color: #f5f5f5;
padding: 30px 20px;
}
.company_story_box {
display: flex;
gap: 40px;
margin-top: 20px;
}
.company_founder_image {
width: 40%;
flex-shrink: 0;
}
.company_founder_image img {
width: 100%;
height: auto;
display: block;
}
.company_founder_info {
flex-grow: 1;
}
.company_founder_name {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #333333;
}
/* 経歴タイムライン */
.company_timeline {
list-style: none;
padding: 0;
margin: 0;
}
.company_timeline_item {
display: flex;
position: relative;
padding-left: 20px;
margin-bottom: 12px;
font-size: 14px;
}
/* 青い丸ポチの再現 */
.company_timeline_item::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background-color: #2b438b;
border-radius: 50%;
}
.company_timeline_date {
width: 130px;
flex-shrink: 0;
color: #2b438b;
font-weight: bold;
}
.company_timeline_detail {
color: #333333;
}
/* 経歴タイムライン（縦線でつながるデザイン） */
.company_timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* リスト全体をつなぐ1本の縦線 */
.company_timeline::before {
content: "";
position: absolute;
top: 10px;
/* 一番上の丸の中心からスタート */
bottom: 10px;
/* 一番下の丸の中心でストップ */
left: 3.5px;
/* 丸の中心（4px）に合わせて配置 */
width: 1px;
/* 線の太さ */
background-color: #2b438b;
/* 線の色 */
}
.company_timeline_item {
position: relative;
padding-left: 20px;
margin-bottom: 20px;
font-size: 14px;
}
/* 丸ポチ（縦線の上に重なるように配置） */
.company_timeline_item::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
background-color: #2b438b;
border-radius: 50%;
z-index: 1;
/* 縦線の上に丸を表示 */
}
/* 日付と詳細の配置（PC表示用） */
.company_timeline_date {
display: inline-block;
width: 130px;
color: #2b438b;
font-weight: bold;
vertical-align: top;
}
.company_timeline_detail {
display: inline-block;
width: calc(100% - 135px);
color: #333333;
vertical-align: top;
}
/* -------------------------------------------------- */
/* 3. 原点を物語る資料（新規追加CSS） */
/* -------------------------------------------------- */
.company_documents_wrapper {
margin-top: 40px;
}
/* 3列カードの横並び配置 */
.company_documents_grid {
display: flex;
gap: 20px;
}
/* 個別カードの枠線とレイアウト */
.company_document_card {
flex: 1;
border: 1px solid #b0b0b0;
background-color: #ffffff;
padding: 15px;
display: flex;
align-items: center;
gap: 15px;
box-sizing: border-box;
}
/* カード内の画像設定 */
.company_document_image {
width: 60%;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.company_document_image img {
width: 60%;
height: auto;
display: block;
}
.company_document_image3 img {
width: 100%;
}
/* カード内の文章設定 */
.company_document_info {
flex: 1;
}
.company_document_title {
font-size: 15px;
color: #2b438b;
font-weight: bold;
margin: 0 0 8px 0;
line-height: 1.3;
}
.company_document_text {
font-size: 12px;
color: #333333;
margin: 0;
line-height: 1.4;
}
/* メッセージバナー全体（薄グレー背景・中央揃え） */
.inner_gray {
max-width: 100%;
background-color: #f5f5f5;
}
.company_message_banner {
background-color: #f5f5f5;
padding: 40px 20px;
text-align: center;
box-sizing: border-box;
}
/* 各行のテキスト */
.company_message_line {
color: #2b438b;
/* メインの濃い青色 */
font-size: 18px;
line-height: 1.8;
margin: 0;
letter-spacing: 0.05em;
}
.company_message_line+.company_message_line {
margin-top: 10px;
/* 2行目の上の余白 */
}
/* 強調する数字の基本スタイル */
.company_number {
font-size: 24px;
font-weight: bold;
}
/* 特に大きく目立たせる数字（80） */
.company_number_large {
font-size: 32px;
}
/* -------------------------------------------------- */
/* PMVV セクション設定 */
/* -------------------------------------------------- */
.company_pmvv_wrapper {
margin-top: 20px;
box-sizing: border-box;
}
.company_pmvv_list {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 30px;
}
/* カード基本デザイン */
.company_pmvv_card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 30px;
display: flex;
align-items: center;
gap: 40px;
box-sizing: border-box;
}
/* アイコン（紺色円形バッジ） */
.company_pmvv_icon {
width: 90px;
height: 90px;
background-color: #1b2a59;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.company_pmvv_icon svg {
width: 44px;
height: 44px;
stroke: #ffffff;
}
/* 画像ファイル（imgタグ）を使う場合は下記を適用 */
.company_pmvv_icon img {
width: 50%;
height: auto;
}
/* タイトルエリア */
.company_pmvv_title_box {
width: 140px;
flex-shrink: 0;
}
.company_pmvv_en {
font-size: 22px;
color: #1b2a59;
font-weight: bold;
margin: 0;
letter-spacing: 0.05em;
}
.company_pmvv_ja {
font-size: 13px;
color: #666666;
margin: 4px 0 0 0;
}
/* テキストエリア */
.company_pmvv_text_box {
flex: 1;
font-size: 14px;
color: #333333;
line-height: 1.8;
}
.company_pmvv_text_box p {
margin: 0 0 8px 0;
}
.company_pmvv_text_box p:last-child {
margin-bottom: 0;
}
/* VALUEのチェックリスト */
.company_value_list {
list-style: none;
padding: 0;
margin: 0;
}
.company_value_list li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
line-height: 1.6;
}
.company_value_list li:last-child {
margin-bottom: 0;
}
/* 独自のチェックマークアイコン */
.company_value_list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
background-color: #1b2a59;
color: #ffffff;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.img_wrapper {
max-width: 80%;
margin-top: 30px;
}
/* -------------------------------------------------- */
/* パワートレインエンジニアリング */
/* -------------------------------------------------- */
/* 全体レイアウト（2カラム） */
.solution-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
}
/* 見出しデザイン (》付き) */
.solution-title {
font-weight: bold;
border-bottom: 1px solid #333;
padding-bottom: 4px;
margin-bottom: 12px;
display: flex;
align-items: center;
}
.solution-title::before {
content: "》";
margin-right: 6px;
font-size: 1.1em;
}
/* リストデザイン (✓付き) */
.solution-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.solution-list li {
position: relative;
padding-left: 1.4em;
margin-bottom: 6px;
line-height: 1.4;
}
.solution-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
/* Lead文 */
.solution-lead {
font-size: 0.95rem;
margin-bottom: 8px;
}
/* 画像スタイル */
.solution-img-box img {
width: 100%;
height: auto;
border-radius: 4px;
}
.benefit-images {
display: flex;
align-items: flex-end;
gap: 20px;
margin-top: 15px;
}
.benefit-images img {
height: 80px;
width: auto;
}
/* -------------------------------------------------- */
/* パワートレインエンジニアリング 設備紹介 */
/* -------------------------------------------------- */
.test-section {
background-color: #ffffff;
border: 1px solid #eef2f5;
border-radius: 8px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* 大見出し（左にアクセントラインを追加） */
.main-heading {
font-size: 20px;
font-weight: bold;
color: #1a252f;
margin-bottom: 24px;
line-height: 1.5;
padding-left: 14px;
border-left: 4px solid #0056b3;
/* ブランドカラーに合わせて青色を指定 */
}
/* 画像とテキストを横並びにするコンテナ */
.content-container {
display: flex;
align-items: flex-start;
gap: 32px;
/* 画像とテキストの間隔 */
}
/* 左側：画像領域 */
.image-box {
width: 42%;
flex-shrink: 0;
}
/* 画像自体のサイズ指定 */
.image-box img {
height: auto;
display: block;
border-radius: 6px;
}
.image-harf img {
width: 50%;
}
/* 右側：テキスト領域 */
.text-box {
width: 58%;
color: #333333;
}
/* 小見出し */
.sub-heading {
font-size: 18px;
font-weight: 600;
color: #0056b3;
margin-top: 0;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e2e8f0;
}
/* 見出しの「》」部分 */
.sub-heading::before {
content: "》";
margin-right: 4px;
}
/* 説明テキスト */
.description {
font-size: 15px;
line-height: 1.7;
color: #4a5568;
margin-bottom: 18px;
}
/* 箇条書き（✓付き） */
.check-list {
list-style: none;
padding-left: 0;
margin: 0 0 20px 0;
}
.check-list li {
font-size: 15px;
line-height: 1.6;
position: relative;
padding-left: 22px;
margin-bottom: 8px;
color: #2d3748;
}
/* 箇条書きの「✓」部分 */
.check-list li::before {
content: "✓";
font-weight: bold;
color: #0056b3;
/* チェックマークをアクセントカラーに */
position: absolute;
left: 0;
top: 0;
}
/* 補足用（カッコ書き）のテキスト */
.check-list .note {
font-size: 13px;
color: #718096;
}
/* 特徴テキストエリア（枠線つきワンポイント） */
.feature-box {
margin-top: 20px;
padding: 12px 16px;
background-color: #f8fafc;
border-left: 3px solid #2b6cb0;
border-radius: 0 4px 4px 0;
font-size: 14px;
line-height: 1.6;
}
.feature-label {
margin: 0;
font-weight: bold;
color: #2b6cb0;
}
.feature-text {
margin: 4px 0 0 0;
color: #2d3748;
}
/* ==========================================
水素エンジン
========================================== */
.product-block {
margin-bottom: 50px;
}
.block-summary-text {
background-color: #f8fafc;
border-left: 4px solid var(--main);
padding: 15px 20px;
font-weight: bold;
line-height: 1.7;
margin-top: 30px;
}
/* --- 強み比較エリア --- */
.strengths-container {
display: flex;
align-items: center;
gap: 20px;
margin: 30px 0;
}
.strength-card {
flex: 1;
border: 1px solid #cbd5e1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
background-color: #ffffff;
}
.strength-card-header {
color: #ffffff;
padding: 12px 16px;
font-weight: bold;
text-align: center;
}
.item-green .strength-card-header {
background-color: #84cc16; /* ジャパンハイドロカラー（黄緑） */
}
.item-blue .strength-card-header {
background-color: var(--main); /* 東京プラントカラー（紺） */
}
.strength-card-body {
padding: 20px;
}
.strength-lead {
font-weight: bold;
margin-bottom: 12px;
line-height: 1.5;
}
/* リスト全体の標準黒丸を消す */
.strength-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.strength-list li {
position: relative;
padding-left: 1.4em; /* チェックマークの入るスペースを確保 */
margin-bottom: 8px;
line-height: 1.5;
}
/* 各リスト項目の前にチェックマークを表示 */
.strength-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
/* 左側（ジャパンハイドロ）のチェックマークの色 */
.item-green .strength-list li::before {
color: #84cc16; /* テーマに合わせた緑色 */
}
/* 右側（東京プラント）のチェックマークの色 */
.item-blue .strength-list li::before {
color: var(--main, #002060); /* テーマに合わせた紺色 */
}
.strength-center-circle {
width: 200px;
height: 200px;
border: 2px solid var(--main);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
line-height: 1.3;
flex-shrink: 0;
background-color: #ffffff;
}
/* --- 課題＆提供価値グリッド --- */
.issues-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 25px 0;
text-align: center;
}
.issue-item {
padding: 20px 10px;
border-radius: 8px;
}
.issue-icon img {
height: 150px;
object-fit: contain;
margin-bottom: 10px;
}
.issue-text {
font-weight: bold;
line-height: 1.4;
margin: 0;
}
.highlight-message-box {
background-color: var(--main);
color: #ffffff;
text-align: center;
padding: 14px;
font-weight: bold;
border-radius: 6px;
margin: 30px 0;
}
/* 3つの提供価値 */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.value-card {
border: 1px solid #cbd5e1;
border-top: 4px solid var(--main);
border-radius: 6px;
padding: 20px;
background-color: #ffffff;
}
.value-title {
color: var(--main);
border-bottom: 1px solid #e2e8f0;
padding-bottom: 8px;
margin-bottom: 12px;
}
.value-list {
padding-left: 18px;
margin: 0;
}
.value-list li {
margin-bottom: 8px;
}
/* 平面図画像エリア */
.rd-map-container {
margin-top: 25px;
text-align: center;
}
.rd-map-container img {
max-width: 100%;
height: auto;
border: 1px solid #cbd5e1;
}
/* ==========================================
水素エンジン詳細・プロセス用追加CSS
========================================== */
/* メイン画像枠 */
.product-single-image {
text-align: center;
margin: 25px 0;
}
.product-single-image img {
max-width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid #cbd5e1;
}
/* 補足スペックボックス */
.spec-highlight-box {
background-color: #f8fafc;
border: 1px solid #cbd5e1;
border-left: 5px solid var(--main);
padding: 18px 20px;
border-radius: 4px;
margin-top: 20px;
}
.spec-box-title {
color: var(--main);
margin-bottom: 10px;
}
.spec-list {
padding-left: 18px;
margin: 0;
}
.spec-list li {
margin-bottom: 6px;
line-height: 1.5;
}
/* 制御分析室 2カラム導入エリア */
.flex-intro-area {
display: flex;
gap: 25px;
align-items: center;
margin-bottom: 30px;
}
.flex-intro-text { flex: 1.2; }
.flex-intro-img { flex: 0.8; }
.flex-intro-img img {
width: 100%;
height: auto;
border-radius: 6px;
}
/* 4カードグリッド */
.equipment-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 25px 0;
}
.equipment-card {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
}
.eq-img {
width: 100%;
object-fit: cover;
border-radius: 4px;
margin-bottom: 10px;
}
.eq-title {
color: var(--main);
border-bottom: 2px solid #e2e8f0;
padding-bottom: 6px;
margin-bottom: 8px;
}
.eq-desc {
line-height: 1.5;
margin-bottom: 10px;
flex-grow: 1;
}
.eq-sub-info {
color: #64748b;
line-height: 1.4;
margin: 0;
border-top: 1px dashed #e2e8f0;
padding-top: 8px;
}
/* --- プロセス（STEP1〜5）矢印構造 --- */
.process-flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin: 25px 0;
}
.process-step {
display: flex;
flex-direction: column;
}
/* 矢印形状のSTEPバッジ */
.step-badge-arrow {
position: relative;
background-color: var(--main);
color: #ffffff;
text-align: center;
font-weight: bold;
padding: 10px 0;
margin-bottom: 12px;
clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%); /* 右矢印のカット */
}
/* 下段フロー用のカラーバリエーション */
.step-badge-arrow.alt-color {
background-color: #0284c7; /* 明るめの青 */
}
.step-card {
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 4px;
padding: 12px;
flex-grow: 1;
}
.step-title {
text-align: center;
margin-bottom: 10px;
line-height: 1.3;
}
.step-list {
padding-left: 14px;
margin: 0;
}
.step-list li {
margin-bottom: 6px;
line-height: 1.4;
}
/* -------------------------------------------------- */
/* ソリューション */
/* -------------------------------------------------- */
/* リストを2列に上から順に分割するスタイル */
.solution-list-2col {
column-count: 2;
/* 2列に分割 */
column-gap: 30px;
/* 左右の列同士の隙間 */
list-style: none;
padding-left: 0;
margin: 0;
}
/* 各リスト項目のスタイル設定 */
.solution-list-2col li {
position: relative;
padding-left: 1.4em;
margin-bottom: 8px;
line-height: 1.4;
break-inside: avoid;
/* 列の途中でリスト項目が分裂するのを防ぐ */
}
/* チェックマーク「✓」の疑似要素 */
.solution-list-2col li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
.pattern1-1-1 {
display: flex;
justify-content: flex-start;
align-items: flex-start;
/* カードの上端を揃える */
column-gap: 4.25%;
}
/* 各列の幅とカード構造の整列 */
.pattern1-1-1 .col {
width: 30.5%;
display: flex;
flex-direction: column;
}
/* 画像を表示する枠の高さを統一 */
.pattern1-1-1 .col figure {
width: 100%;
height: 200px;
/* ★好みの表示高さに調整可能 */
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
/* （任意）隙間ができた際のアタリ色 */
}
/* 画像自体の高さを枠いっぱいにし、歪みを防止 */
.pattern1-1-1 .col figure img {
width: 100%;
height: 100%;
object-fit: contain;
/* 画像を切らずに綺麗に収める */
}
/* 下部のキャプション（テキスト）の装飾調整 */
.pattern1-1-1 .col p {
margin-top: 10px;
font-size: 14px;
color: #333333;
}
.pattern1-1-1 .col p {
font-weight: bold;
text-align: center;
margin-top: 10px;
font-size: 1.7rem;
color: #333333;
}
.pattern3-2 {
display: flex;
flex-wrap: wrap;
/* 折り返しを有効化 */
justify-content: center;
/* 下段の2枚を中央寄せ配置 */
align-items: flex-start;
gap: 30px 4.25%;
/* 縦間隔: 30px、横間隔: 4.25% */
width: 100%;
}
/* 各列の幅（3列の計算値） */
.pattern3-2 .col {
width: 30.5%;
display: flex;
flex-direction: column;
}
/* 画像エリアの高さ揃え設定 */
.pattern3-2 .col figure {
width: 100%;
height: 200px;
/* 必要に応じて調整可能 */
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
}
.pattern3-2 .col figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pattern3-2 .col p {
margin-top: 10px;
font-size: 14px;
line-height: 1.6;
color: #333333;
}
/* -------------------------------------------------- */
/* 受託試験 */
/* -------------------------------------------------- */
/* フロー全体を囲むコンテナ */
.step-flow {
display: flex;
justify-content: space-between;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding: 20px 0;
}
/* 各ステップのカード（5等分） */
.step-item {
flex: 1;
display: flex;
flex-direction: column;
}
/* 矢印型の見出し部分 */
.step-header {
background-color: #002060;
/* 濃い紺色 */
color: #ffffff;
font-weight: bold;
text-align: center;
padding: 12px 0;
margin-bottom: 10px;
/* clip-pathで右側が突起した矢印の形を作成 */
clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}
/* 白枠のコンテンツボックス */
.step-body {
background-color: #ffffff;
border: 1px solid #f0f0f0;
/* 薄い外枠 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
/* うっすらとした影 */
padding: 15px 10px;
flex-grow: 1;
/* 下揃えを均一にする */
display: flex;
flex-direction: column;
}
/* ボックス内のタイトル（太枠囲み） */
.step-title {
font-weight: bold;
text-align: center;
margin: 0 0 15px 0;
padding: 10px 5px;
border: 2px solid #000000;
/* 黒い太枠 */
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
}
/* 箇条書きリスト */
.step-list {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.5;
color: #000000;
font-weight: bold;
}
.step-list li {
position: relative;
padding-left: 12px;
margin-bottom: 6px;
}
/* リスト先頭の「・」 */
.step-list li::before {
content: "・";
position: absolute;
left: 0;
}
/* 注記（※注釈部分） */
.step-note {
font-size: 1.1rem;
font-weight: bold;
color: #000000;
margin: 8px 0 0 0;
line-height: 1.3;
}
/* -------------------------------------------------- */
/* モータテストのソリューション */
/* -------------------------------------------------- */
/* コンテナ全体のスタイル */
.bench-container {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
color: #333333;
}
/* 見出し（》付き） */
.bench-title {
font-size: 20px;
font-weight: normal;
text-decoration: underline;
margin-top: 0;
margin-bottom: 20px;
color: #000000;
}
.bench-title::before {
content: "》";
margin-right: 4px;
}
/* 画像ギャラリー（3列配置） */
.bench-gallery {
display: flex;
gap: 15px;
margin-bottom: 30px;
align-items: flex-start;
}
.gallery-item {
flex: 1;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
/* テーブルの枠組み */
.table-wrapper {
width: 100%;
overflow-x: auto;
/* 万が一横幅が溢れた場合のスクロール担保 */
margin-bottom: 15px;
}
.bench-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
/* 表のヘッダー（濃紺背景・白文字） */
.bench-table th {
background-color: #002060;
/* スクショに合わせた濃紺 */
color: #ffffff;
padding: 10px 8px;
border: 1px solid #333333;
font-weight: bold;
vertical-align: middle;
line-height: 1.3;
}
.bench-table th span {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
/* 表のデータセル */
.bench-table td {
padding: 8px 6px;
border: 1px solid #333333;
background-color: #ffffff;
}
/* 注記・スペック情報テキスト */
.bench-info {
font-size: 14px;
line-height: 1.6;
color: #000000;
}
.info-note {
margin: 4px 0;
}
.special-support {
margin-top: 12px;
margin-bottom: 16px;
}
.special-title {
margin: 0;
font-weight: bold;
}
.special-desc {
margin: 0;
padding-left: 1.2em;
}
.spec-list {
margin-top: 15px;
}
.spec-title {
margin: 0 0 4px 0;
}
.spec-list ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.spec-list li {
margin-bottom: 2px;
}
.spec-list li span {
display: inline-block;
width: 90px;
/* 項目名の横幅を揃える */
}
/* 全体コンテナ */
.motor-bench-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 各ブロック（上下の間隔） */
.motor-bench-item {
display: flex;
gap: 40px;
/* 左右エリアの隙間 */
margin-bottom: 50px;
align-items: flex-start;
}
/* 左側：画像エリア（幅45%） */
.motor-bench-img {
width: 45%;
flex-shrink: 0;
}
/* 右側：テキストエリア（幅55%） */
.motor-bench-text {
width: 55%;
}
/* 見出し（》付き＋下線） */
.bench-sub-title {
font-size: 20px;
font-weight: normal;
text-decoration: underline;
margin-top: 0;
margin-bottom: 16px;
color: #000000;
line-height: 1.3;
}
.bench-sub-title::before {
content: "》";
margin-right: 4px;
}
/* 画像スタイル（影付き） */
.img-box img {
width: 70%;
height: auto;
display: block;
}
/* チェックリスト（✓付き） */
.bench-check-list {
list-style: none;
padding-left: 0;
margin: 0 0 24px 0;
}
.bench-check-list li {
font-size: 16px;
line-height: 1.6;
position: relative;
padding-left: 22px;
margin-bottom: 6px;
color: #000000;
}
.bench-check-list li::before {
content: "✓";
font-weight: bold;
position: absolute;
left: 0;
top: 0;
}
/* 特徴テキストエリア */
.bench-feature {
font-size: 15px;
line-height: 1.6;
color: #000000;
}
.feature-head {
margin: 0 0 4px 0;
}
.feature-body {
margin: 0;
padding-left: 1.2em;
/* 行頭を少し揃える */
}
/* ==========================================
社長挨拶セクション（PC用）
========================================== */
/* 全体コンテナ */
.president-greeting-container {
display: flex;
justify-content: space-between;
gap: 40px;
margin-top: 30px;
color: #333333;
}
/* 左側：メッセージ本文 */
.greeting-text-box {
flex: 1;
font-size: 15px;
line-height: 1.8;
}
.greeting-text-box p {
margin-top: 0;
margin-bottom: 24px;
}
.greeting-text-box p:last-child {
margin-bottom: 0;
}
/* 右側：写真・署名エリア */
.greeting-profile-box {
width: 280px;
flex-shrink: 0;
}
.profile-img img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
}
/* 署名テキスト */
.profile-info {
font-size: 14px;
line-height: 1.5;
color: #333333;
}
.profile-info .company-name {
margin: 0;
}
.profile-info .position {
margin: 2px 0 6px 0;
}
.profile-info .name {
margin: 0;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.05em;
}
/* 全体コンテナ（左右2列） */
.profile_2col_container {
display: flex;
gap: 50px;
width: 100%;
color: #2b3a4a;
box-sizing: border-box;
}
/* 左右各ボックスの幅 */
.profile_left_box {
width: 55%;
}
.profile_right_box {
width: 55%;
}
/* セクションタイトル（青い縦線付き） */
.company_section_title {
font-size: 20px;
font-weight: bold;
color: #2b3a4a;
margin-top: 0;
margin-bottom: 24px;
padding-left: 12px;
border-left: 5px solid #1d3557;
/* 青い左線 */
display: flex;
align-items: baseline;
gap: 8px;
}
.company_section_title .sub_date {
font-size: 14px;
font-weight: normal;
color: #555555;
}
/* 左側：定義リスト（項目名と内容） */
.profile_info_list {
margin: 0;
padding: 0;
}
.info_row {
display: flex;
margin-bottom: 18px;
line-height: 1.6;
font-size: 15px;
}
.info_row dt {
width: 100px;
flex-shrink: 0;
font-weight: bold;
color: #2b3a4a;
}
.info_row dd {
margin: 0;
flex: 1;
}
/* 日付部分 */
.company_timeline_date {
width: 110px;
flex-shrink: 0;
color: #1d3557;
font-weight: bold;
}
/* 詳細文章部分 */
.company_timeline_detail {
flex: 1;
}
/* ==========================================
基本情報テーブル（PC用）
========================================== */
.company-table-wrapper {
width: 100%;
margin-top: 20px;
margin-bottom: 40px;
}
.company-info-table {
width: 100%;
border-collapse: collapse;
/* 枠線の隙間をなくす */
font-size: 15px;
line-height: 1.6;
color: #333333;
}
/* 行ごとの設定（枠線なし） */
.company-info-table tr {
border: none;
}
/* 1行おきに薄いグレーの背景色をつける（奇数行） */
.company-info-table tr:nth-child(odd) {
background-color: #f7f7f7;
}
/* 偶数行は白色背景 */
.company-info-table tr:nth-child(even) {
background-color: #ffffff;
}
/* 左列：項目名（見出し） */
.company-info-table th {
width: 225px;
padding: 12px 16px;
text-align: left;
font-weight: bold;
vertical-align: top;
/* 複数行の際、上揃えにする */
color: #2b3a4a;
}
/* 右列：データ表示部分 */
.company-info-table td {
padding: 12px 16px;
vertical-align: top;
}
/* ==========================================
顧問セクション（PC用）
========================================== */
/* 導入メッセージ */
.advisor-intro-text {
font-size: 15px;
line-height: 1.8;
color: #333333;
margin-top: 25px;
margin-bottom: 35px;
}
/* 顧問リスト全体 */
.advisor-list {
width: 100%;
}
/* 各顧問ブロック（区切り線付き） */
.advisor-item {
display: flex;
align-items: flex-start;
padding: 20px 0;
border-bottom: 1px solid #cccccc;
/* 下側の区切り線 */
}
.advisor-item:first-child {
padding-top: 0;
}
/* 左側：役職ラベル */
.advisor-label {
width: 200px;
flex-shrink: 0;
font-size: 15px;
font-weight: bold;
color: #333333;
padding-top: 2px;
}
/* 右側：事務所名とリンク */
.advisor-detail {
flex: 1;
}
.advisor-name {
margin: 0 0 6px 0;
font-size: 15px;
color: #333333;
}
/* コロンの位置調整 */
.colon {
margin-right: 8px;
}
/* URLリンクスタイル */
.advisor-link {
font-size: 14px;
color: #333333;
text-decoration: none;
word-break: break-all;
/* 長いURLの折り返し対応 */
transition: color 0.2s ease;
}
.advisor-link:hover {
color: #003399;
text-decoration: underline;
}
/* ==========================================
組織セクション（PC用）
========================================== */
.organization-container {
width: 100%;
margin-top: 25px;
color: #333333;
}
/* 上段：メッセージと画像の左右配置 */
.organization-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-bottom: 35px;
}
/* 左側：メッセージテキスト */
.organization-text {
flex: 1;
font-size: 15px;
line-height: 1.8;
}
.organization-text p {
margin-top: 0;
margin-bottom: 24px;
}
.organization-text p:last-child {
margin-bottom: 0;
}
/* 右側：作業写真 */
.organization-image {
width: 45%;
flex-shrink: 0;
}
.organization-image img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* 下段：採用情報ボタンエリア */
.organization-btn-wrapper {
text-align: center;
margin-top: 30px;
}
/* ボタン本体（紺色背景・矢印付き） */
.recruit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 30px;
background-color: var(--main);
/* 濃い紺色 */
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 14px 45px;
text-decoration: none;
min-width: 240px;
box-sizing: border-box;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.recruit-btn .arrow {
font-size: 18px;
transition: transform 0.2s ease;
}
/* ボタンホバー（マウスカーソルをのせた時）演出 */
.recruit-btn:hover {
background-color: #1a3d8f;
}
.recruit-btn:hover .arrow {
transform: translateX(5px);
/* 矢印が右に動く */
}
/* ==========================================
国内拠点エリア（PC用）
========================================== */
.japan-map-container {
width: 100%;
margin-top: 25px;
color: #333333;
}
/* 導入文 */
.map-intro-text {
font-size: 15px;
line-height: 1.7;
margin-bottom: 30px;
}
/* 横並びコンテナ（地図＋リスト） */
.map-content-wrapper {
display: flex;
gap: 40px;
align-items: flex-start;
}
/* 左側：地図画像エリア */
.map-image-box {
width: 100%;
position: sticky;
/* スクロール時に地図を固定表示（PCのみ） */
top: 20px;
}
.map-image-box img {
width: 100%;
height: auto;
display: block;
}
/* 右側：拠点カードリスト */
.base-list {
width: 52%;
display: flex;
flex-direction: column;
gap: 16px;
}
/* 拠点カード（白い箱・角丸・枠線） */
.base-card {
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 6px;
padding: 16px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* カード内タイトル（青色） */
.base-title {
margin: 0 0 8px 0;
font-size: 15px;
font-weight: bold;
color: var(--main);
}
/* 住所テキスト */
.base-address {
margin: 0 0 6px 0;
font-size: 13.5px;
color: #333333;
line-height: 1.5;
}
/* 連絡先行（電話・メール・URL） */
.base-contact {
margin: 0 0 4px 0;
font-size: 13.5px;
color: #333333;
display: flex;
align-items: center;
}
.base-contact:last-child {
margin-bottom: 0;
}
.base-contact .icon {
margin-right: 6px;
font-size: 12px;
}
.base-contact a {
color: #333333;
text-decoration: none;
}
.base-contact a:hover {
color: var(--main);
text-decoration: underline;
}
/* ==========================================
東京昭島本社エリア（PC用）
========================================== */
.headquarters-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-top: 25px;
color: #333333;
}
/* 左側エリア（幅58%） */
.headquarters-left {
width: 58%;
}
.global-partner {
width: 100%;
}
/* 青い縦線付き見出し */
.headquarters-sub-title {
font-size: 20px;
font-weight: bold;
color: var(--main);
margin: 0 0 16px 0;
padding-left: 12px;
border-left: 4px solid var(--main);
/* 左側の濃い青線 */
line-height: 1.4;
}
/* 説明文 */
.headquarters-desc {
font-size: 14.5px;
line-height: 1.8;
margin: 0 0 25px 0;
color: #333333;
}
/* 左下：画像2枚並び */
.headquarters-sub-images {
display: flex;
gap: 20px;
}
.sub-image-card {
flex: 1;
}
.sub-image-card .img-box img {
width: 100%;
height: 230px;
object-fit: cover;
/* 画像の比率を崩さずトリミング表示 */
display: block;
}
/* キャプションテキスト */
.img-caption-main {
font-size: 13.5px;
color: #555555;
margin: 8px 0 2px 0;
}
.img-caption-sub {
font-size: 13.5px;
color: #555555;
margin: 0;
}
/* 右側エリア：メイン工場写真（幅42%） */
.headquarters-right {
width: 42%;
flex-shrink: 0;
}
.main-img-box img {
width: 100%;
height: auto;
display: block;
}
.main-img-caption {
text-align: right;
font-size: 14px;
color: #555555;
margin: 8px 0 0 0;
}
/* ==========================================
事業紹介
========================================== */
.business-synergy-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 導入メッセージテキスト */
.synergy-lead-text {
font-size: 15px;
line-height: 1.8;
color: #333333;
margin-top: 25px;
margin-bottom: 40px;
}
/* 2カラムエリア（中央に縦線） */
.synergy-card-wrapper {
display: flex;
align-items: stretch;
}
/* 左側カード（右側にグレーの仕切り線） */
.synergy-card-wrapper .synergy-card:first-child {
flex: 1;
padding-right: 40px;
border-right: 1px solid #d0d0d0;
display: flex;
flex-direction: column;
}
/* 右側カード */
.synergy-card-wrapper .synergy-card:last-child {
flex: 1;
padding-left: 40px;
display: flex;
flex-direction: column;
}
/* 見出しエリア */
.card-header-business {
margin-bottom: 25px;
}
.card-header-business .en-title {
display: block;
font-size: 16px;
color: var(--main);
/* 青色テキスト */
margin-bottom: 6px;
}
.card-header-business .jp-title {
font-size: 20px;
font-weight: normal;
color: var(--main);
margin: 0;
text-decoration: underline;
/* 下線 */
}
/* リスト部分（白抜きチェックマーク） */
.synergy-list {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.synergy-list li {
font-size: 16px;
line-height: 1.6;
position: relative;
padding-left: 32px;
margin-bottom: 12px;
color: #333333;
font-weight: 500;
}
/* 濃紺の丸型チェックマークアイコン */
.synergy-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
background-color: var(--main);
color: #ffffff;
border-radius: 50%;
font-size: 12px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
/* 画像表示部分 */
.card-img-box {
text-align: center;
margin-bottom: 30px;
}
.card-img-box img {
max-width: 100%;
height: auto;
max-height: 200px;
object-fit: contain;
}
/* 詳しくはこちらボタン */
.btn-box {
margin-top: auto;
/* ボタンを下揃えに統一 */
text-align: center;
}
.more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 30px;
background-color: var(--main);
color: #ffffff;
font-size: 14px;
padding: 10px 24px;
text-decoration: none;
min-width: 200px;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
.more-btn:hover {
background-color: #1a3d8f;
}
/* ==========================================
お客様の事業分野
========================================== */
/* 全体コンテナ */
.delivery-record-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 導入リード文章 */
.record-lead-text {
font-size: 15px;
line-height: 1.8;
color: #333333;
margin-top: 25px;
margin-bottom: 35px;
}
/* アイコン一覧グリッド（横6列×2行） */
.field-icon-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 25px 10px;
/* 上下25px、左右10pxの間隔 */
margin-bottom: 40px;
}
/* 各アイコンアイテム（6等分） */
.field-icon-item {
width: calc(100% / 6 - 10px);
/* 6列均等配置 */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* アイコン画像スタイル */
.field-icon-item img {
width: 90px;
/* アイコンの直径 */
height: 90px;
object-fit: contain;
/* 画像の縦横比を維持 */
display: block;
border-radius: 50%;
/* 画像自体を円形にカット（元画像が丸でない場合にも有効） */
transition: transform 0.2s ease;
}
/* マウスホバー時に少し拡大する演出 */
.field-icon-item img:hover {
transform: scale(1.05);
}
/* アイコン下のテキスト（スクショ通り非表示にする場合は display: none; ） */
.field-icon-item p {
font-size: 13px;
color: #333333;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.2;
}
/* ==========================================
納入実績セクション
========================================== */
.record-table-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 合計社数・日付 */
.record-summary-box {
margin-top: 20px;
margin-bottom: 30px;
line-height: 1.6;
}
.summary-count {
font-size: 16px;
font-weight: 500;
margin: 0;
}
.summary-date {
font-size: 16px;
font-weight: 500;
margin: 0;
}
/* 実績リスト全体 */
.record-table-list {
width: 100%;
}
/* 各行（下区切り線付き） */
.record-table-row {
display: flex;
align-items: flex-start;
padding: 20px 0;
border-bottom: 1px solid #e0e0e0;
/* 下側のうっすらとした区切り線 */
}
/* 左側：カテゴリー名 */
.record-cat-label {
width: 180px;
flex-shrink: 0;
font-size: 16px;
font-weight: 500;
color: #333333;
line-height: 1.6;
}
/* 右側：企業名リスト */
.record-cat-content {
flex: 1;
font-size: 15.5px;
line-height: 1.8;
color: #333333;
}
/* 補足用テキスト（※40か国以上） */
.record-cat-content .note-text {
font-size: 14.5px;
color: #555555;
}
/* ==========================================
プロセスフロー
========================================== */
.process-flow-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 青線付き見出し */
.process-sub-title {
font-size: 2rem;
font-weight: bold;
color: var(--main);
margin: 25px 0 16px 0;
padding-left: 12px;
border-left: 4px solid var(--main);
line-height: 1.4;
}
/* 導入説明文 */
.process-lead-desc {
line-height: 1.8;
margin-bottom: 35px;
color: #333333;
}
/* カードリスト全体 */
.process-card-list {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* カード本体（白背景・グレー枠線） */
.process-card-item {
width: 100%;
background-color: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 4px;
padding: 20px 25px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 30px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* 左列：番号とステータス名 */
.card-num-box {
width: 160px;
flex-shrink: 0;
text-align: center;
}
.step-num {
display: block;
font-size: 48px;
font-weight: 500;
color: var(--main);
line-height: 1;
margin-bottom: 8px;
font-family: Arial, sans-serif;
}
.step-name {
display: block;
font-size: 18px;
font-weight: 500;
color: var(--main);
line-height: 1.3;
}
/* 中央列：説明文章 */
.card-text-box {
flex: 1;
font-size: 14.5px;
line-height: 1.7;
color: #333333;
}
.card-text-box p {
margin: 0 0 6px 0;
}
.card-text-box p:last-child {
margin-bottom: 0;
}
/* 右列：画像表示エリア */
.card-img-box {
width: 180px;
flex-shrink: 0;
text-align: right;
}
.card-img-box img {
max-width: 100%;
height: auto;
max-height: 110px;
object-fit: contain;
}
/* 下向き三角矢印（▼） */
.step-arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid var(--main);
margin: 12px 0;
}
/* 最下部テキスト */
.process-bottom-text {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #333333;
margin-top: 30px;
margin-bottom: 10px;
}
/* ==========================================
沿革
========================================== */
.history-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* タイムラインリスト（左側に一本の青い縦線を描画） */
.history-timeline {
list-style: none;
padding: 0 0 0 20px;
margin: 30px 0 0 0;
position: relative;
border-left: 2px solid var(--main);
/* 青い縦直線 */
}
/* 各年代ブロック */
.history-item {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 45px;
}
.history-item:last-child {
margin-bottom: 0;
}
/* 青い丸ポチ（●）アイコン */
.history-item::before {
content: "";
position: absolute;
left: -26px;
/* 縦線の真上に重ねる位置調整 */
top: 6px;
width: 10px;
height: 10px;
background-color: var(--main);
border-radius: 50%;
}
/* 左側：年表記（例: 1948 年） */
.history-year {
width: 120px;
flex-shrink: 0;
font-size: 18px;
font-weight: bold;
color: var(--main);
line-height: 1.4;
}
/* 右側：コンテンツ詳細文章 */
.history-content {
padding-left: 20px;
flex: 1;
font-size: 15px;
line-height: 1.8;
color: #333333;
}
.history-content p {
margin: 0 0 6px 0;
}
.history-content p.note {
font-weight: bold;
}
.history-content .history-sub-title {
font-size: 16px;
font-weight: bold;
color: var(--main);
margin: 0 0 6px 0;
}
/* 写真画像エリア */
.history-images {
display: flex;
gap: 20px;
margin-top: 20px;
}
.history-images .img-box {
max-width: 80%;
}
.history-images .img-box img {
width: 100%;
height: auto;
display: block;
}
/* ==========================================
パートナー募集
========================================== */
.partner-recruit-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 青い縦線付き見出し */
.partner-sub-title {
font-size: 20px;
font-weight: bold;
color: var(--main);
margin: 25px 0 30px 0;
padding-left: 12px;
border-left: 4px solid var(--main);
line-height: 1.4;
}
/* リスト全体 */
.partner-info-list {
width: 100%;
}
/* 各行（下部にグレーの区切り線） */
.partner-info-row {
display: flex;
align-items: flex-start;
padding: 22px 0;
border-bottom: 1px solid #cccccc;
}
.partner-info-row:first-child {
padding-top: 0;
}
/* 左側：項目名（ラベル） */
.partner-label {
width: 200px;
flex-shrink: 0;
font-size: 15px;
font-weight: bold;
color: #333333;
line-height: 1.6;
}
/* 右側：詳細コンテンツ */
.partner-detail {
flex: 1;
font-size: 15px;
line-height: 1.7;
color: #333333;
}
/* 中黒（・）付き箇条書きリスト */
.partner-bullet-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.partner-bullet-list li {
position: relative;
padding-left: 14px;
margin-bottom: 6px;
}
.partner-bullet-list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
}
/* 注意書きエリア */
.partner-note-box {
margin-top: 15px;
font-size: 14px;
color: #333333;
}
.partner-note-box p {
margin: 0 0 4px 0;
}
/* 通常テキスト行 */
.partner-text {
margin: 0 0 6px 0;
}
/* メールリンク */
.partner-contact-mail {
margin: 0;
}
.partner-contact-mail a {
color: var(--main);
text-decoration: underline;
transition: color 0.2s ease;
}
.partner-contact-mail a:hover {
color: #1a3d8f;
}
/* ==========================================
当社のコア技術セクション
========================================== */
/* --- 画像ポップアップ（拡大）用スタイル --- */
/* タップできることを示すポインター */
.pop-image-link {
display: inline-block;
cursor: pointer;
}
.pop-image-link img {
transition: opacity 0.2s ease;
}
.pop-image-link:hover img {
opacity: 0.85; /* タップできることがわかるように少し透明にする */
}
/* ポップアップ背景（暗い背景） */
.image-modal {
display: none; /* 普段は非表示 */
position: fixed;
z-index: 9999; /* 最前面に表示 */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* 半透明の黒背景 */
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
/* 拡大された画像本体 */
.modal-content {
max-width: 95%;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
/* 閉じるボタン（右上 ×） */
.modal-close {
position: absolute;
top: 15px;
right: 25px;
color: #ffffff;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.core-tech-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 導入メッセージ */
.core-tech-intro {
margin-top: 25px;
margin-bottom: 35px;
font-size: 15px;
line-height: 1.8;
color: #333333;
}
.core-tech-intro p {
margin: 0 0 4px 0;
}
/* 左右2カラムレイアウト */
.core-tech-content {
display: flex;
gap: 40px;
align-items: flex-start;
}
.core-tech-left {
width: 48%;
}
.core-tech-right {
width: 52%;
}
/* 小見出し（青色中央揃え） */
.core-tech-section-title {
font-size: 18px;
font-weight: bold;
color: var(--main);
text-align: center;
margin: 0 0 25px 0;
}
/* 左エリア：ダイアグラム */
.core-tech-diagram {
display: flex;
align-items: center;
gap: 20px;
}
.core-circle-box {
width: 45%;
flex-shrink: 0;
}
.core-circle-box img {
width: 100%;
height: auto;
display: block;
}
.core-cards-box {
width: 55%;
display: flex;
flex-direction: column;
gap: 16px;
}
/* 4つの角丸カード */
.core-card {
background-color: var(--main);
color: #ffffff;
font-size: 14.5px;
font-weight: bold;
text-align: center;
padding: 12px 10px;
border-radius: 6px;
line-height: 1.3;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
box-sizing: border-box;
}
/* 右エリア：16個の供試体アイコン（4列グリッド） */
.specimen-icon-grid {
display: flex;
flex-wrap: wrap;
gap: 20px 10px;
}
.specimen-item {
width: calc(100% / 4 - 10px);
/* 4列均等配置 */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.specimen-item img {
width: 70px;
height: 70px;
object-fit: contain;
display: block;
border-radius: 50%;
margin-bottom: 6px;
}
.specimen-item p {
font-size: 12px;
color: var(--main);
font-weight: 500;
margin: 0;
line-height: 1.2;
}
/* ==========================================
ものづくりのこだわりバナー
========================================== */
/* バナー全体枠（背景画像＋青色オーバーレイ） */
.commitment-banner {
width: 100%;
height: 300px;
background-color: var(--main);
background-image: url(/img/commitment_background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding: 0 20%;
box-sizing: border-box;
border-radius: 4px;
background-blend-mode: soft-light;
/* 必要に応じて角丸を調整 */
}
.commitment-inner {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
}
/* インナーコンテンツ */
.commitment-banner-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
/* タイトル見出し（白文字） */
.commitment-banner-title {
font-size: 32px;
font-weight: bold;
color: #ffffff;
margin: 0;
line-height: 1.2;
letter-spacing: 0.05em;
}
/* 「詳しく見る」ボタン（白背景・青文字） */
.more-btn-white {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 30px;
background-color: white;
color: var(--main);
font-size: 1.8rem;
font-weight: bold;
padding: 10px 24px;
text-decoration: none;
min-width: 200px;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
.more-btn-white:hover {
background-color: #e6e6e6;
}
.commitment-banner-btn .arrow {
font-size: 16px;
transition: transform 0.2s ease;
}
/* ボタンホバー時演出 */
.commitment-banner-btn:hover {
background-color: #f0f4fa;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.commitment-banner-btn:hover .arrow {
transform: translateX(4px);
/* 矢印が右に少し動く */
}
/* ==========================================
採用
========================================== */
/* カード全体を包むコンテナ */
.recruit-nav-wrapper {
display: flex;
gap: 30px;
/* カード同士の間隔 */
justify-content: center;
width: 100%;
margin: 40px 0;
}
/* リンクカード本体 */
.recruit-nav-card {
flex: 1;
max-width: 500px;
/* カードの最大幅 */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px;
background-color: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
text-decoration: none;
color: #333333;
transition: all 0.3s ease;
/* アニメーションの設定 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* ホバー（カーソルを乗せたとき）の動き */
.recruit-nav-card:hover {
border-color: var(--main);
/* 指定のメインカラーを使用 */
transform: translateY(-5px);
/* 少し上に浮き上がる */
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
/* カード内のタイトル */
.recruit-nav-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 12px;
color: #333333;
position: relative;
padding-bottom: 8px;
}
/* タイトル下部のアクセント線 */
.recruit-nav-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: var(--main);
/* 指定のメインカラーを使用 */
}
/* 説明テキスト */
.recruit-nav-text {
line-height: 1.6;
color: #666666;
margin-bottom: 20px;
}
/* 「詳しく見る」ボタン風の表示 */
.recruit-nav-btn {
align-self: flex-end;
display: inline-block;
padding: 8px 20px;
background-color: var(--main);
/* 指定のメインカラーを使用 */
color: #ffffff;
font-weight: bold;
border-radius: 4px;
transition: opacity 0.3s ease;
}
.recruit-nav-card:hover .recruit-nav-btn {
opacity: 0.85;
}
/* ボタンを包むコンテナの設定 */
.recruit-btn-container {
display: flex;
justify-content: center;
/* 中央に配置 */
gap: 20px;
/* ボタン同士の間隔 */
margin: 30px 0;
/* 上下の余白 */
width: 100%;
}
/* ボタンの基本スタイル */
.recruit-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 300px;
/* ボタンの最大幅 */
padding: 15px 20px;
background-color: var(--main);
/* メインカラーを使用 */
color: #ffffff;
/* 文字色（白） */
text-decoration: none;
/* 下線を消す */
border-radius: 6px;
/* 角を少し丸くする */
box-sizing: border-box;
transition: opacity 0.3s ease;
/* ホバー時の滑らかなアニメーション */
}
/* マウスを載せたときの効果（ホバー） */
.recruit-btn:hover {
opacity: 0.85;
/* 少し透明にしてクリックできることを伝える */
}
/* ==========================================
新卒採用
========================================== */
/* メイン見出し（青帯） */
.recruit-sec-header {
background-color: var(--main);
color: #ffffff;
padding: 12px 20px;
border-radius: 4px;
margin-bottom: 30px;
}
/* サブ見出し（左ライン） */
.recruit-sub-header {
color: var(--main);
border-left: 5px solid var(--main);
padding-left: 14px;
margin: 40px 0 20px 0;
}
/* 1. カードグリッドレイアウト */
.recruit-intro-grid {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.intro-card {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 4px solid var(--main);
padding: 20px 24px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.intro-title {
color: var(--main);
margin-bottom: 10px;
}
.highlight-text {
font-weight: bold;
}
.intro-list {
padding-left: 20px;
margin: 0;
}
.intro-list li {
margin-bottom: 6px;
}
/* 2. 募集要項テーブル */
.recruit-table-wrapper {
width: 100%;
overflow-x: auto;
margin-bottom: 40px;
}
.recruit-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #cbd5e1;
}
.recruit-table th,
.recruit-table td {
border: 1px solid #cbd5e1;
padding: 14px 18px;
text-align: left;
}
.recruit-table th {
background-color: #f1f5f9;
color: var(--main);
width: 28%;
white-space: nowrap;
}
.recruit-table td {
background-color: #ffffff;
}
.job-list {
list-style: none;
padding: 0;
margin: 0;
}
.job-list li {
margin-bottom: 8px;
}
.job-list li:last-child {
margin-bottom: 0;
}
/* 3. 選考フロー */
.selection-flow {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
max-width: 800px;
margin: 0 auto;
}
.flow-step {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.step-badge {
background-color: var(--main);
color: #ffffff;
width: 120px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 6px;
flex-shrink: 0;
}
.step-content p {
margin: 0;
line-height: 1.5;
}
.sub-note {
color: #64748b;
margin-top: 4px !important;
}
/* 下矢印の作成 */
.flow-arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid var(--main);
margin: 8px 0 8px 70px;
/* バッジの中央に位置合わせ */
}
/* ==========================================
アコーディオン独自スタイル
========================================== */
.job-accordion-item {
border: 1px solid #cbd5e1;
border-radius: 8px;
margin-bottom: 20px;
background-color: #ffffff;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* ヘッダーボタン */
.job-accordion-header {
width: 100%;
padding: 18px 20px;
background-color: #f1f5f9;
border: none;
border-bottom: 2px solid var(--main);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
transition: background-color 0.2s ease;
}
.job-accordion-header:hover {
background-color: #e2e8f0;
}
.job-header-left {
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 15px;
}
/* ＋ / − アニメーションアイコン */
.accordion-icon {
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.accordion-icon::before,
.accordion-icon::after {
content: "";
position: absolute;
background-color: var(--main);
transition: transform 0.3s ease;
}
/* 横棒 */
.accordion-icon::before {
top: 7px;
left: 0;
width: 16px;
height: 2px;
}
/* 縦棒 */
.accordion-icon::after {
top: 0;
left: 7px;
width: 2px;
height: 16px;
}
/* 開いたときのアイコン（− に変化） */
.job-accordion-item.is-open .accordion-icon::after {
transform: rotate(90deg);
opacity: 0;
}
/* 中身の開閉エリア */
.job-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}
.job-accordion-item.is-open .job-accordion-content {
max-height: 2000px;
/* 十分な高さを指定して開く */
transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}
.job-accordion-inner {
padding: 24px;
}
/* 各セクション */
.job-section-box {
margin-bottom: 24px;
}
.job-section-title {
color: var(--main);
border-bottom: 1px solid #cbd5e1;
padding-bottom: 6px;
margin-bottom: 12px;
font-weight: bold;
}
.job-message-lead {
font-weight: bold;
color: var(--main);
margin-bottom: 8px;
}
.job-message-text {
line-height: 1.8;
margin: 0;
}
.job-detail-list {
padding-left: 20px;
margin: 0;
}
.job-detail-list li {
margin-bottom: 8px;
line-height: 1.6;
}
/* ==========================================
採用 概要
========================================== */
.hrm-lead,
.hrm-foot-text {
line-height: 1.8;
margin-bottom: 30px;
}
.hrm-diagram {
max-width: 800px;
margin: 30px auto;
text-align: center;
}
/* 上段（オレンジ） */
.hrm-top-box {
background-color: #f97316; /* オレンジ色 */
color: #ffffff;
padding: 12px;
border-radius: 4px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
/* 中段 4カラムレイアウト */
.hrm-middle-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.hrm-skill-card {
display: flex;
flex-direction: column;
}
.skill-title {
padding: 10px;
color: #ffffff;
border-radius: 4px;
font-weight: bold;
line-height: 1.3;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.green-bg {
background-color: #84cc16; /* 黄緑色 */
}
.skill-desc {
margin-top: 10px;
line-height: 1.5;
color: #475569;
}
/* 下段（水色） */
.hrm-bottom-box {
padding: 12px;
color: #ffffff;
border-radius: 4px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.lightblue-bg {
background-color: #38bdf8; /* 水色 */
}
.hrm-mind-desc {
margin-top: 10px;
font-weight: bold;
color: #334155;
margin-bottom: 30px;
}
/* ==========================================
キャリアパス
========================================== */
/* 2カラムレイアウト（画像 ＋ 構造図） */
.career-top-flex {
display: flex;
gap: 30px;
align-items: center;
margin-bottom: 30px;
}
.career-image {
flex: 1;
}
.career-image img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
/* 右側：構造図 */
.career-structure {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.structure-box {
background-color: var(--main);
color: #ffffff;
text-align: center;
padding: 12px 16px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.structure-sub-grid {
display: flex;
gap: 10px;
}
.structure-sub-grid .sub-box {
flex: 1;
}
/* テキストグループ */
.career-text-group {
line-height: 1.8;
}
.career-lead {
font-weight: bold;
margin-bottom: 10px;
}
/* 注記スタイル */
.career-note {
background-color: #f8fafc;
border-left: 4px solid #64748b;
color: #475569;
padding: 10px 14px;
margin-bottom: 20px;
}
.career-desc {
margin-bottom: 16px;
}
/* ==========================================
評価制度
========================================== */
/* --- 1. 概要・テキストエリア --- */
.eval-lead {
line-height: 1.8;
margin-bottom: 35px;
}
/* --- 2. ツリー構造図 全体コンテナ --- */
.eval-diagram-wrapper {
width: 100%;
overflow-x: auto; /* スマホ表示時の崩れ防止（横スクロール対応） */
padding-bottom: 20px;
}
.eval-diagram-container {
display: flex;
gap: 20px;
min-width: 750px; /* 図表のレイアウトを崩さない最小幅 */
max-width: 900px;
margin: 30px auto;
font-family: sans-serif;
}
/* --- 3. 左側：責任区分ラベル軸 --- */
.eval-labels {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-top: 60px; /* KGIブロックの高さ分下げて位置を合わせる */
width: 150px;
flex-shrink: 0;
text-align: right;
font-weight: bold;
}
.label-item {
height: 90px;
display: flex;
align-items: center;
justify-content: flex-end;
color: #333333;
}
/* --- 4. 右側：メイン図表エリア --- */
.eval-diagram-body {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
}
/* 最上部 KGI ブロック */
.kgi-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.kgi-box {
background-color: var(--main, #002060);
color: #ffffff;
width: 140px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.line-kgi-to-top {
width: 2px;
height: 15px;
background-color: #000000;
}
/* メインフレーム構造 */
.eval-diagram-main {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
}
/* 各段のカラー外枠（黄・赤・青・緑） */
.eval-frame {
position: relative;
height: 90px;
border: 2px solid transparent;
border-radius: 12px;
z-index: 2; /* 背景のKPIグリッドより上に配置 */
display: flex;
justify-content: center;
align-items: center;
}
.frame-yellow { border-color: #f59e0b; } /* 社長：黄 */
.frame-red { border-color: #ef4444; } /* 経営層：赤 */
.frame-blue { border-color: #06b6d4; } /* リーダー：水色 */
.frame-green { border-color: #10b981; } /* スタッフ：緑 */
/* --- 5. 重ね合わせ目標カード（浮き上がるカード） --- */
.target-card {
position: absolute;
color: #ffffff;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
border: 3px solid #ffffff; /* 白い縁取り */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* 立体的なドロップシャドウ */
z-index: 10; /* 最前面に配置 */
}
/* 水色カード（経営目標・事業部目標・部の目標） */
.card-management,
.card-business {
background-color: #38bdf8;
width: 55%;
height: 65px;
top: 12px;
}
.target-card-group {
display: flex;
gap: 20px;
width: 60%;
justify-content: center;
}
.card-dept {
position: relative;
background-color: #38bdf8;
flex: 1;
height: 65px;
}
/* オレンジカード（個人の目標） */
.group-personal {
width: 75%;
gap: 10px;
}
.card-personal {
position: relative;
background-color: #fb923c;
flex: 1;
height: 75px;
line-height: 1.2;
}
/* --- 6. 最背景に敷き詰める 4x4 の KPI 格子 --- */
.kpi-grid-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 8px;
padding: 8px 15px;
box-sizing: border-box;
z-index: 1; /* 最背面に配置 */
}
.kpi-cell {
background-color: #0070c0;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 2px;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
/* ==========================================
カタログダウンロード
========================================== */
.catalog-container {
width: 100%;
margin: 0 auto;
color: #333333;
}
/* 5列グリッド配置 */
.catalog-grid {
display: flex;
flex-wrap: wrap;
gap: 20px 1.5%;
margin-bottom: 50px;
}
/* 各カード（幅18.8%で横5列） */
.catalog-card {
width: 18.8%;
background-color: #ffffff;
border: 1px solid #a0a0a0;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* 画像表示枠 */
.catalog-img-box {
width: 100%;
height: 110px;
background-color: #f0f0f0;
margin-bottom: 15px;
overflow: hidden;
}
.catalog-img-box-company {
width: 50%;
margin: 0 auto;
height: 110px;
background-color: #f0f0f0;
margin-bottom: 15px;
overflow: hidden;
}
.catalog-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* タイトルテキスト */
.catalog-card-title {
font-size: 14.5px;
font-weight: 500;
color: var(--main);
text-align: center;
margin: 0 0 15px 0;
line-height: 1.3;
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
/* ボタン群（カード下部に揃える） */
.catalog-btn-group {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
/* ボタンが1つのカード用：一番下に押し下げずに上に詰める */
.catalog-btn-group.single-btn {
margin-top: 0;
}
/* 濃紺ボタン */
.catalog-btn-navy {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--main);
color: #ffffff;
font-size: 11.5px;
padding: 6px 10px;
text-decoration: none;
box-sizing: border-box;
transition: opacity 0.2s ease;
}
/* 白地ボタン */
.catalog-btn-white {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
color: var(--main);
border: 1px solid var(--main);
font-size: 11.5px;
padding: 5px 10px;
text-decoration: none;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
.catalog-btn-navy:hover,
.catalog-btn-white:hover {
opacity: 0.85;
}
/* 下部お問い合わせバナー */
.catalog-request-banner {
border: 1px solid #a0a0a0;
padding: 25px 35px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
}
.catalog-request-info {
display: flex;
align-items: center;
gap: 20px;
}
/* 「i」インフォアイコン */
.catalog-info-icon {
width: 36px;
height: 36px;
background-color: var(--main);
color: #ffffff;
font-family: Georgia, serif;
font-size: 22px;
font-weight: bold;
font-style: italic;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.catalog-request-title {
font-size: 17px;
font-weight: bold;
color: var(--main);
margin: 0 0 4px 0;
}
.catalog-request-desc {
font-size: 13.5px;
color: #555555;
margin: 0;
}
/* バナー内お問い合わせボタン */
.catalog-contact-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
background-color: var(--main);
color: #ffffff;
font-size: 14px;
font-weight: 500;
padding: 12px 25px;
min-width: 220px;
text-decoration: none;
box-sizing: border-box;
transition: opacity 0.2s ease;
}
.catalog-contact-btn:hover {
opacity: 0.85;
}
/* 見出しスタイル */
.p-dl-main-heading {
font-size: 2rem;
background-color: var(--main);
color: #fff;
padding: 10px 16px;
font-weight: bold;
margin-bottom: 20px;
}
.p-dl-sub-heading {
font-size: 2.5rem;
border-left: 4px solid var(--main);
padding-left: 10px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
/* レイアウト配置 */
.p-dl-content {
display: block;
justify-content: center;
gap: 30px;
align-items: flex-start;
margin-bottom: 80px;
}
/* 左側：カードエリア（幅を大きく変更） */
.p-dl-cards {
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: stretch;
gap: 20px;
flex-shrink: 0;
margin-bottom: 50px;
}
.p-dl-card {
width: 280px;
/* 必要に応じて調整 */
border: 1px solid #ccc;
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0 auto;
}
.p-dl-card__thumb {
width: 100%;
flex: 1 1 auto;
/* 高さを可変にし、カード全体の高さに合わせて自動で伸びるように変更 */
display: flex;
align-items: center;
/* 画像を上下中央に配置 */
justify-content: center;
background-color: #fff;
/* 背景を白に設定して枠内になじませる */
padding: 0;
box-sizing: border-box;
}
.p-dl-card--wide {
width: auto;
flex: 1;
}
.p-dl-card--wide .p-dl-card__thumb {
aspect-ratio: 16 / 9;
}
.p-dl-card__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.p-dl-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: var(--main);
color: #fff;
text-align: center;
padding: 10px 4px;
text-decoration: none;
font-weight: bold;
margin-top: auto;
transition: opacity 0.2s;
}
.p-dl-card__btn:hover {
opacity: 0.85;
}
/* 右側：テーブル（幅を固定＆縮小） */
.p-dl-table-wrapper {
max-width: 100%;
margin: 0 auto;
margin-bottom: 80px;
}
.p-dl-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #000;
}
.p-dl-table th,
.p-dl-table td {
border: 1px solid #000;
padding: 10px 14px;
text-align: left;
vertical-align: middle;
}
.p-dl-table th {
background-color: var(--main);
color: #fff;
font-weight: bold;
}
.p-dl-table th:first-child,
.p-dl-table td:first-child {
width: 45%;
/* カラムごとの比率調整 */
}
.p-dl-table__link {
color: var(--main);
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 4px;
}
.p-dl-table__link:hover {
text-decoration: underline;
}
/* アイコン用 */
.p-dl-icon-download {
display: inline-block;
font-style: normal;
}
/* タブメニュー全体のレイアウト */
.p-dl-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: -1px;
/* テーブル枠線と自然につなげる */
position: relative;
z-index: 1;
/* ★横スクロール有効化の設定 */
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
/* iOSの滑らかなスクロール */
scrollbar-width: none;
/* Firefoxのスクロールバー非表示 */
}
/* スクロールバーを非表示にしてスッキリ見せる（Chrome / Safari） */
.p-dl-tabs::-webkit-scrollbar {
display: none;
}
/* 各タブボタン */
.p-dl-tab {
flex: 1;
background-color: #f1f3f5;
color: #555;
border: 1px solid #ccc;
border-bottom: none;
padding: 8px 12px;
cursor: pointer;
font-weight: bold;
text-align: center;
transition: background-color 0.2s, color 0.2s;
border-radius: 4px 4px 0 0;
}
.p-dl-tab:hover {
background-color: #e9ecef;
}
/* アクティブ（選択中）のタブ */
.p-dl-tab.is-active {
background-color: var(--main);
color: #fff;
border-color: var(--main);
}
/* タブコンテンツ（初期状態は非表示） */
.p-dl-tab-content {
display: none;
}
/* アクティブなコンテンツのみ表示 */
.p-dl-tab-content.is-active {
display: block;
}
/* ==============================================
* テーブルがないページ用の特別スタイル (--no-table)
* ============================================== */
/* 全体コンテナを中央寄せ */
.p-dl-container--no-table {
display: flex;
justify-content: center;
/* 中央に配置 */
width: 100%;
margin-bottom: 60px;
}
/* カタログエリアを画面中央に集約し、カード幅を大きく指定 */
.p-dl-container--no-table .p-dl-catalog-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 32px;
/* カード同士の間隔 */
width: 100%;
max-width: 900px;
/* 全体の最大幅を設定してバランス保持 */
}
/* 1枚目（縦長）のカードサイズ変更：中央でドンと見せるサイズ感 */
.p-dl-container--no-table .p-dl-catalog-card {
width: 320px;
/* 通常より大きめに設定 */
border: 1px solid #ccc;
display: flex;
flex-direction: column;
background-color: #fff;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.p-dl-container--no-table .p-dl-catalog-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 2枚目（横長プレゼン資料）のカードサイズ変更 */
.p-dl-container--no-table .p-dl-catalog-card--wide {
width: 440px;
/* 16:9用によりワイドに設定 */
}
/* 画像枠（画像全体がはみ出さず収まるように） */
.p-dl-container--no-table .p-dl-catalog-img-box {
width: 100%;
aspect-ratio: 1 / 1.3;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
padding: 12px;
box-sizing: border-box;
}
.p-dl-container--no-table .p-dl-catalog-card--wide .p-dl-catalog-img-box {
aspect-ratio: 16 / 9;
}
.p-dl-container--no-table .p-dl-catalog-img-box img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
/* トリミングせず全体表示 */
}
/* ボタン（カード最下部） */
.p-dl-container--no-table .p-dl-catalog-btn {
background-color: var(--main);
color: #fff;
text-align: center;
padding: 12px 8px;
font-weight: bold;
margin-top: auto;
}
/* アイコンと文字の上下揃え */
.p-dl-catalog-btn,
.p-dl-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.p-dl-icon {
width: 2em;
height: 2em;
fill: currentColor;
flex-shrink: 0;
}
/* ==========================================
こだわり
========================================== */
/* 紺色のタイトル帯 */
.rd-header {
background-color: var(--main);
/* 紺色（必要に応じてカラーコードを変更） */
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 10px 15px;
margin-bottom: 25px;
}
/* コンテンツエリア */
.rd-content {
padding: 0 10px;
}
/* 青い縦線付きの見出し */
.rd-subtitle {
font-size: 22px;
color: var(--main);
/* 文字色（青） */
border-left: 6px solid var(--main);
/* 左側の青い縦線 */
padding-left: 12px;
margin-bottom: 15px;
font-weight: normal;
}
/* 文章テキスト */
.rd-text {
line-height: 1.8;
margin-bottom: 25px;
}
/* 画像ギャラリー（複数枚・複数列に対応） */
.rd-image-gallery {
display: flex;
flex-wrap: wrap;
/* 枚数が多い場合に自動で次の行へ折り返す */
gap: 20px;
/* 画像同士の間隔 */
}
/* 各画像アイテムの大きさの設定 */
.rd-image-item {
/* 幅を固定または調整する場合はここを変更（例: 2列にしたい場合は flex: 0 0 calc(50% - 10px); ） */
width: 28%;
max-width: 100%;
}
.rd-image-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* ==========================================
アクセス
========================================== */
/* 紺色のタイトル帯 */
.access-header {
background-color: var(--main);
/* 紺色 */
color: #ffffff;
font-weight: bold;
font-size: 18px;
padding: 10px 15px;
margin-bottom: 25px;
}
/* コンテンツエリア */
.access-content {
padding: 0 10px;
}
/* 左側に青い縦線のある見出し */
.access-title {
font-size: 22px;
color: #1e3a8a;
border-left: 6px solid var(--main);
padding-left: 12px;
margin-bottom: 20px;
font-weight: normal;
}
/* 会社情報テキスト */
.access-info {
margin-bottom: 30px;
line-height: 1.8;
font-size: 15px;
}
.access-info p {
margin: 0 0 5px 0;
}
/* アクセス方法（電車・車） */
.access-routes {
margin-bottom: 30px;
}
.route-item {
display: flex;
align-items: baseline;
margin-bottom: 12px;
font-size: 15px;
}
/* 「電車の方」「お車の方」のラベル */
.route-label {
width: 100px;
flex-shrink: 0;
color: #555555;
}
/* アクセス説明文 */
.route-desc {
flex-grow: 1;
line-height: 1.6;
}
/* 地図埋め込みエリア */
.access-map {
width: 100%;
margin-top: 20px;
}
.access-map iframe {
width: 100%;
border: none;
}