@charset "utf-8";
/* =========================================================
style.css
2025 — 下層ページスタイル
========================================================= */
article {
line-height: 1.8;
}
article > section:first-child {
padding-top: 4.5em;
}
article > section { /*下層では*/
padding-top: 4.5em;
padding-bottom: 4.5em;
}
article a {
color: #0F6BB9;
text-decoration: none;
}
article a:hover {
text-decoration: underline;
}
article strong {
color: #F64B00;
font-weight: 400;
}
/* SPサイズ調整 */
@media (max-width: 767px) {
article > section:first-child {
padding-top: 2em;
}
}
/* =========================================================
ページタイトル（各カテゴリーで背景は同じ）
========================================================= */
.page-title {
background: linear-gradient(to right, #26c8ce, #549cdc);
}
.page-title .inner {
height: auto;
display: flex;
align-items: center;
color: #fff;
padding-top: 1em;
padding-bottom: 1em;
}
.page-title h2 {
text-align: left;
font-size: 1.9rem;
padding-top: 1.4em;
}
.page-title__eng {
font-size: 50%;
display: block;
font-weight: 400;
margin-top: 0.5em;
}
/* ---- ver. ---- */
.page-title.company .inner,.page-title.service .inner,.page-title.partnership .inner,.page-title.news .inner,.page-title.case .inner {
height: 280px;
}
.page-title.company {
background: #40bed3 url("/assets/img/company/page-title.webp") no-repeat center center / cover;
}
.page-title.service {
background: #40bed3 url("/assets/img/service/page-title.webp") no-repeat center center / cover;
background-size: cover;
}
.page-title.partnership {
background: #40bed3 url("/assets/img/partnership/page-title.webp") no-repeat center center / cover;
background-size: cover;
}
.page-title.news {
background: #40bed3 url("/assets/img/news/page-title.webp") no-repeat center center / cover;
background-size: cover;
}
.page-title.case {
background: #40bed3 url("/assets/img/case/page-title.webp") no-repeat center center / cover;
background-size: cover;
}
/* ---- ="page-title others" ---- */
.page-title.others, .page-title.contact {
background: linear-gradient(to right, #26c8ce, #549cdc);
}
.page-title.others .inner, .page-title.contact .inner {
height: auto;
padding-top: 1em;
padding-bottom: 1em;
}
/* SPサイズ調整 */
@media (max-width: 767px) {
.page-title .inner {
height: auto;
}
.page-title h2 {
font-size: 1.2rem;
padding-top: 1.4em;
}
}
/* =========================================================
見出し（固定スタイル群）
========================================================= */
/* ----- 記事内・主要見出し ----- */
.c-heading-primary {
position: relative;
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
padding-bottom: 1em;
margin-bottom: 2.4em;
}
.c-heading-primary::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 2.7em;
height: 2px;
background-color: #49a1d1;
}
/* ----- 装飾ナシ Lv2----- */
.c-heading-secondary {
font-size: 1.3rem;
margin-bottom: 0.9em;
margin-top: var(--space-3);
}
/* ----- 装飾ナシ Lv3 ----- */
.c-heading-lv3 {
font-size: 1.1rem;
margin-bottom: 0.9em;
margin-top: var(--space-3);
}
/* ----- 装飾ナシ Lv4 ----- */
.c-heading-lv4 {
font-size: 1rem;
margin-bottom: 0.5em;
margin-top: var(--space-3);
}
/* ----- 青文字青背景左青ボーダー ----- */
.c-heading-bgblue {
font-size: 1rem;
color: #0F6BB9;
background: #F4F9FA;
border-left: 1px #49A1D1 solid;
margin-bottom: 0.9em;
margin-top: var(--space-3);
padding: 0.6em 1em;
}
/* ----- 下線付き ----- */
.c-heading-underline {
border-bottom: #ccc 1px solid;
padding-bottom: 0.7em;
margin-bottom: 1.1em;
}
/* SPサイズ調整 */
@media (max-width: 767px) {
.c-heading-primary {
font-size: 1.1rem;
}
.c-heading-secondary {
font-size: 1rem;
}
.c-heading-lv3 {
font-size: 0.9rem;
margin-top: var(--space-2);
}
}
/* =========================================================
パンくずリスト
========================================================= */
.c-breadcrumb {
padding: 0.8em 0;
}
.c-breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.c-breadcrumb li {
display: flex;
align-items: center;
font-size: 0.7rem;
}
.c-breadcrumb li + li::before {
content: "＞";
margin: 0 0.5em;
}
.c-breadcrumb a {
color: #0F6BB9;
}
/* =========================================================
横並び
========================================================= */
/* --- Split (汎用2カラム) --- */
.c-split {
display: flex;
align-items: flex-start; /* 上揃え */
gap: clamp(16px, 4vw, 40px);
}
/* 左：本文 / 右：メディア */
.c-split__main {
flex: 1 1 56%;
min-width: 0; /* 長文でのはみ出し防止 */
}
.c-split__aside {
flex: 0 0 39%;
}
/* 画像周り */
.c-split__media {
margin: 0;
}
.c-split__photo {
display: block;
width: 100%;
height: auto;
}
.c-split__sign {
display: block;
width: min(90%, 370px);
height: auto;
margin-top: 0.75rem;
margin-inline: auto;
}
/* --- qualification 経営方針 --- */
.c-split--houshin .c-split__aside {
flex: 0 0 186px;
}
/* --- qualification ISO --- */
.c-split--iso .c-split__aside {
flex: 0 0 270px;
}
/* --- 上下中央ver --- */
.c-split--align-c {
align-items: center;
}
/* SP：縦積み＋画像は下に来る（HTML順で実現） */
@media (max-width: 767px) {
.c-split {
flex-direction: column;
}
.c-split__main {
width: 100%;
}
.c-split__aside {
flex-basis: auto;
max-width: none;
}
.c-split__photo {
max-width: 80%;
margin: auto;
}
.c-split__sign {
width: min(76%, 260px);
}
.c-split--houshin .c-split__aside, .c-split--iso .c-split__aside {
flex-basis: auto;
width: 100%;
}
.c-split--houshin .c-split__photo {
width: 50%;
}
.c-split--iso .c-split__photo {
width: 50%;
}
}
/* =========================================================
表型のdl
========================================================= */
.c-deflist {
margin: 0;
padding: 0;
}
.c-deflist__item {
display: flex;
border-bottom: 1px solid #ccc;
padding: 1.5em 0;
line-height: 1.6;
}
.c-deflist__item dt {
font-weight: bold;
margin: 0;
min-width: 12rem; /* ラベル側の幅を固定してddを揃える */
}
.c-deflist__item dd {
margin: 0;
flex: 1;
}
/* dtが長いバージョン */
.c-deflist--wide-dt dt {
min-width: 19rem; /* ラベル側の幅を固定してddを揃える */
}
/* dtが短いバージョン */
.c-deflist--narrow-dt dt {
min-width: 8rem; /* ラベル側の幅を固定してddを揃える */
}
/* itemに下線がないバージョン */
.c-deflist--noborder .c-deflist__item {
border-bottom: none;
padding: 0.6em 0;
}
@media (min-width: 768px) {
.c-deflist__item dt {
padding-left: 0.5em;
}
}
@media (max-width: 767px) {
.c-deflist__item {
flex-direction: column;
}
.c-deflist__item dt {
margin-bottom: 0.6em;
min-width: 100%; /* ラベル側の幅を固定してddを揃える */
}
}
/* =========================================================
BOX
========================================================= */
/* indent */
.c-indentbox {
display: block;
}
@media (min-width: 768px) {
.c-indentbox {
padding-left: 50px;
}
}
/* border */
.c-box {
padding: 50px;
border: #ccc 1px solid;
}
.c-box p:last-child, .c-box ul:last-child {
margin-bottom: 0;
}
.c-box *:first-child {
margin-top: 0;
}
/* 色地 */
.c-box--bg-yellow {
background: #FFFDF0;
border: none;
}
/* 色地 */
.c-box--bg-lightgreen {
background: #F1F9EC;
border: none;
}
@media (max-width: 767px) {
.c-box {
padding: 1.5em;
}
}
/* =========================================================
リスト list
========================================================= */
/*--- 基本：ドット付きリスト ul.c-list ---*/
.c-list {
list-style: none;
margin: 0 0 1.2em;
padding: 0;
}
.c-list_sub {
font-size: 80%;
font-weight: 400;
color: #222;
padding: 0.5em 0 0.6em;
}
/* 行頭ドット + ぶら下げインデント */
.c-list > li {
position: relative;
padding-left: 1.5em; /* ドット幅 + 文字との間隔 */
line-height: 1.5;
}
.c-list--narrow > li {
padding-left: 1em; /* ドット幅 + 文字との間隔 */
}
.c-list > li::before {
content: "•"; /* 行頭ドット */
position: absolute;
left: 0;
font-weight: 700; /* 少し太めに */
}
/* 間隔調整 */
.c-list > li + li {
margin-top: 0.4em;
}
/*--- 番号付きリストul.c-ethics-list（頭にHTMLで1. をつける） ---*/
.c-ethics-list {}
.c-ethics-list li {
display: flex;
}
.c-ethics-list .num {
flex-shrink: 0;
width: 2.2em;
}
/*--- CHECK印付きリストul.c-list--check ---*/
.c-list--check {
list-style: none;
margin: 0 0 1.2em;
padding: 0;
}
.c-list--check > li {
padding-left: 1.8em;
background: url("/assets/img/icon_check.svg") no-repeat top 0.4em left / 1.0em;
font-size: 1.1rem;
color: #1EA43D;
font-weight: 700;
line-height: 1.4;
}
.c-list--check > li + li {
margin-top: 0.9em;
}
@media (max-width: 767px) {
.c-list--check > li {
font-size: 1.0rem;
}
}
/* =========================================================
table型の表（スマホ時の表示に特徴あり※PCのみrowspanあり、SPではtable分割）
HTMLではPC/SPで別々にコード書いてます
========================================================= */
.p-table {
border-collapse: separate;
border-spacing: 2px;
background: #fff;
}
.p-table th {
background: #e4f2fa;
font-weight: bold;
padding: 0.8em;
}
.p-table td {
background: #f7f7f7;
padding: 1.5em;
}
.p-table th, .p-table td {
border: none;
}
.p-table--sp .p-table__row {
margin-bottom: 1em;
}
.p-table--sp .p-table__th {
background: #e4f2fa;
padding: 0.6em;
}
.p-table--sp .p-table__common, .p-table--sp .p-table__td {
background: #f7f7f7;
margin-bottom: 2px;
padding: 0.6em;
}
@media (max-width: 767px) {
.p-table th, .p-table td {
display: block;
margin-bottom: 2px;
}
.p-table th, .p-table__th {
font-weight: 700;
}
.p-table--sp .p-table__common, .p-table--sp .p-table__td {
padding: 1.5em; /*.p-table tdと合わせる*/
}
}
@media (min-width: 768px) {
/* 拠点（/company/base.html） */
.p-table--kyoten th {
width: 15em;
}
.p-table--kyoten td:last-child {
width: 20em;
}
}
/*--- DXにある表 ---*/
.p-table--service {
width: 100%;
border-collapse: collapse;
}
.p-table--service th, .p-table--service td {
border-bottom: 1px solid #1A958B;
padding: 1.2em 1em;
vertical-align: middle;
}
.p-table--service thead th {
background: none;
text-align: center;
padding-bottom: 0.5em;
}
.p-table--service tbody th {
background: #F1F9EC;
color: #1EA43D;
font-weight: 700;
width: 15%;
}
.p-table--service td:nth-child(2) {
background: #FFFDF0;
width: 20%;
font-size: 0.9rem;
}
.p-table--service td:nth-child(3) {
background: #fff;
width: 70%;
}
.logo-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 26px;
row-gap: 0px;
align-items: center;
justify-items: center; /* 横方向を中央に揃える */
}
/* 2列 */
@media (max-width: 940px) {
.logo-grid {
grid-template-columns: 1fr 1fr;
}
}
/* 1列 */
@media (max-width: 600px) {
.logo-grid {
grid-template-columns: 1fr;
}
}
/*.logo-grid img {
margin: 0.3em;
vertical-align: middle;
border: 1px #ccc solid;
}*/
/*--- granditにある表 ---*/
.p-table--grandit {
border-collapse: collapse;
width: min(1100px, 100%);
margin: auto;
}
.p-table--grandit th {
background: #F1F9EC;
color: #1EA43D;
overflow-wrap: break-word;
word-break: keep-all;
width: 23em;
}
.p-table--grandit th, .p-table--grandit td {
border-bottom: 10px #fff solid;
padding: 2em;
}
/* スマホ対応 */
@media (max-width: 767px) {
.p-table th, .p-table td {
display: table-cell;
width: auto;
}
.p-table.p-table--kyoten th, .p-table.p-table--kyoten td {
display: block; /*各拠点連絡先はタテ積み*/
}
/*.p-table--service img {
margin: auto;
display: block;
}グリッドに変えたので左寄せのままで*/
.p-table--grandit th, .p-table--grandit td {
display: block;
padding: 1em;
}
.p-table--grandit th {
border-bottom: none;
margin-bottom: 0;
}
.p-table--service thead th {
font-size: 0.8rem;
white-space: nowrap;
}
}
/* PC */
@media (min-width: 768px) {
.p-table--service {
width: 90%;
margin-inline: auto;
}
}
/* 調整（これはこれでヘン）
@media (max-width: 400px) {
.p-table th, .p-table td {
display: block;
width: 100%!important;
}
} */
/*--- 奉行にある表 ---*/
.p-flow {
max-width: 1100px;
margin: auto;
}
.p-flow__item {
display: flex;
padding: 2.2em 0 0;
position: relative;
}
.p-flow__item:not(:last-child) .p-flow__connector {
position: absolute;
left: 2.7em;
top: calc(100% + 6px);
width: 10px;
height: 36px;
background-image: url(/assets/img/dot-green.svg);
background-repeat: repeat-y;
}
/* 左側 STEP */
.p-flow__step {
display: flex;
align-items: center;
gap: 0.8em;
flex: 0 0 24em;
background: linear-gradient(to left, #3bca83 0%, #00958b 100%);
padding: 1.4em;
border-radius: 15px 0 0 15px;
color: #fff;
}
/* 番号 */
.p-flow__number {
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
color: #00958b;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
line-height: 1;
letter-spacing: -0.1em;
flex-shrink: 0; /* とりあえず「縮むな！」だけでもOK */
}
/* タイトル */
.p-flow__title {
font-weight: 700;
}
/* 右側説明 */
.p-flow__desc {
display: flex;
align-items: center;
flex: 1;
background: #f7f7f7;
border-radius: 0 15px 15px 0;
padding: 1.6em 2em;
color: #333;
font-size: 90%;
}
/* スマホ対応 */
@media (max-width: 767px) {
.p-flow__step {
flex: 0 0 46%;
padding: 0.5em;
gap: 0.3em;
line-height: 1.4;
}
.p-flow__number {
transform: scale(0.8);
}
.p-flow__desc {
padding: 1.0em 1em;
overflow-wrap: break-word;
/* word-break: keep-all;*/
}
.p-flow__item:not(:last-child) .p-flow__connector {
background-size: 50%;
}
}
@media (max-width: 500px) {
.p-flow__item {
flex-direction: column;
}
.p-flow__step {
border-radius: 15px 15px 0 0;
}
.p-flow__desc {
border-radius: 0 0 15px 15px;
}
}
/* =========================================================
table
========================================================= */
.p-partner-table {
width: auto;
border-collapse: separate;
border-spacing: 0 10px; /* 段の間に白10px */
font-size: 1rem;
line-height: 1.8;
margin: 0 2em;
}
/* 共通セル */
.p-partner-table th, .p-partner-table td {
padding: 1em 1.2em;
vertical-align: middle;
border: none;
}
/* ヘッダー */
.p-partner-table thead th {
text-align: center;
font-weight: 700;
background: #fff;
border: none;
padding: 0.5em 1em 0;
}
/* 1列目（区分） */
.p-partner-table tbody th {
width: 27%;
text-align: left;
background: #e9f6fc;
color: #0071b3;
font-weight: 700;
}
/* 2・3列目共通 */
.p-partner-table tbody td {
background: #f7f7f7;
position: relative; /* 擬似要素の基準に */
font-size: 90%;
}
/* 2列目の右側に区切り線 */
.p-partner-table tbody td:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: calc(100% - 1.5em); /* ← 上下のpadding分を差し引く */
background: #ccc;
transform: translateY(-50%);
}
/* 2・3列目の幅 */
.p-partner-table tbody td:nth-child(2) {
width: 35%;
}
.p-partner-table tbody td:nth-child(3) {
width: 30%;
}
@media (max-width: 767px) {
.p-partner-table {
margin: 0;
}
.p-partner-table tbody th {
font-size: 90%;
}
}
/* =========================================================
メッセージセクション
========================================================= */
/* 汎用メッセージセクション */
.c-section-message {
text-align: center;
padding: 2.0em 1em;
border-top: 1px solid #49A1D1;
border-bottom: 1px solid #49A1D1;
font-weight: 700;
margin-top: 4em;
}
.c-section-message p:last-child {
margin-bottom: 0;
}
/* =========================================================
会社案内TOP
========================================================= */
/* --- 大ボタン --- */
.huge-btn {
height: 240px;
background: url("/assets/img/company/img_huge-btn.png") no-repeat bottom right 16%, linear-gradient(to right, #e4f1fa 0%, #f5fafc 40%, #cfe5ef 100%);
background-size: 250px, 100%;
display: flex;
align-items: center;
padding: 50px 12%;
gap: 60px;
}
.huge-btn p {
padding: 0;
margin: 0;
}
.huge-btn a {
color: #333 !important
}
@media (max-width: 1000px) {
.huge-btn {
height: 240px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 50px 2em;
gap: 0;
background: url("/assets/img/company/img_huge-btn.png") no-repeat bottom right -5%, linear-gradient(to right, #e4f1fa 0%, #f5fafc 40%, #cfe5ef 100%);
background-size: contain, 100%;
}
}
@media (max-width: 768px) {
.huge-btn {
height: auto;
}
}
@media (max-width: 450px) {
.huge-btn {
padding: 2em 1em;
background: url("/assets/img/company/img_huge-btn.png") no-repeat bottom right -30px, linear-gradient(to right, #e4f1fa 0%, #f5fafc 40%, #cfe5ef 100%);
background-size: contain, 100%;
}
}
/* --- ＣＯＭＰＡＮＹ ＰＲＯＦＩＬＥ LIST --- */
.c-data-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 26px;
text-align: center;
}
.c-data-list__item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 0 1 calc((100% - 26px * 2) / 3);
border: 2px solid #e3e3e3;
}
.c-data-list__title {
background: linear-gradient(to right, #2b83bb 0%, #2b83bb 47.96%, #3bb8ce 100%);
padding: 0.8em;
text-align: center;
line-height: 1;
color: #fff;
width: 100%;
font-size: 1.2rem;
font-weight: 700;
}
.c-data-list__details {
flex: 1; /* ← 残りスペースを占有 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.5em 1em;
text-align: center;
}
.c-data-list__text {
font-size: 0.8rem;
}
.c-data-list__value {
font-size: 2.5rem;
}
.c-data-list__unit {
font-size: 68%;
}
@media (max-width: 1000px) {
.c-data-list {
gap: 12px;
}
.c-data-list__item {
flex: 1 1 calc((100% - 12px) / 2); /* 2列 */
}
}
@media (max-width: 768px) {
.c-data-list__title {
font-size: 1rem;
}
.c-data-list__value {
font-size: 2.0rem;
}
}
@media (max-width: 450px) {
.c-data-list__item:not(:nth-child(2)) figure.c-data-list__figure img {
transform: scale(0.7);
}
}
/* --- 画像付きリンク LIST --- */
.c-image-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.c-image-list .btn-01 {
text-align: left;
margin-top: 0.7em;
}
.c-image-list__item {
flex: 0 1 calc((100% - 20px * 3) / 4); /* ← grow:0 で拡張しない */
box-sizing: border-box;
color: #333;
}
.c-image-list__figure {
overflow: hidden;
}
.c-image-list__figure img {
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.c-image-list__item:hover img {
transform: scale(1.1); /* 551/480 ≒ 1.148 → 1.15倍でOK */
}
@media (max-width: 768px) {
.c-image-list__item {
flex: 1 1 calc((100% - 20px) / 2); /* 2列 */
}
}
/* =========================================================
特殊スタイル
========================================================= */
/*---- 幅を揃える（/company/qualification.html の日付） ----*/
.u-width-justify {
flex: none !important;
display: inline-block !important;
width: 10em !important;
text-align: justify !important;
text-align-last: justify !important;
-ms-text-align-last: justify !important; /* ← IE11対応 */
}
@supports not (text-align-last: justify) {
.u-width-justify::after {
content: "";
display: inline-block;
width: 100%;
}
}
/* 幅バリエーション */
.u-width-justify--8 {
width: 8em !important;
}
.u-width-justify--10 {
width: 10em !important;
}
.u-width-justify--12 {
width: 12em !important;
}
/* =========================================================
製品サービスINDEX
========================================================= */
.p-service-index__inner {
display: flex;
flex-wrap: wrap;
gap: 2em;
justify-content: center;
}
.p-service-index__item {
flex: 0 1 calc((100% - 4em) / 3);
margin-bottom: 1.5em;
position: relative; /*ボタンを下部に揃えるため*/
padding-bottom: 3.6em;
}
.p-service-index__item .btn-01 {
position: absolute;
width: 100%;
bottom: 0;
}
.case .p-service-index__img { /*導入事例だけ！*/
aspect-ratio: 370 / 300;
overflow: hidden;
}
.p-service-index__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-service-index__text {
padding-top: 1.5em;
}
.p-service-index__title {
margin-bottom: 0.8em;
}
.p-service-index__title .sub {
display: block;
font-size: 76%;
margin-bottom: 0.3em;
}
.p-service-index__link {
display: inline-block;
color: #0F6BB9;
}
/*製品サービスINDEXでの.c-list*/
.c-list--service-index {
padding-top: 1em;
margin-top: 1em;
border-top: 1px solid #ccc;
}
.c-list--service-index > li {
padding-left: 0.8em;
line-height: 1.7;
}
.c-list--service-index > li + li {
margin-top: 0;
}
.c-list > li:has(a)::before {
color: #0072ce;
}
@media (max-width: 767px) {
.p-service-index__inner {
gap: 1.5em;
}
/*2列*/
.p-service-index__inner {
gap: 1em;
justify-content: space-between;
}
.p-service-index__item {
flex: 1 1 100%; /*1列*/
flex: 0 1 calc((100% - 1em) / 2);
}
}
/* iPhone SE や小型Android向けの調整 */
@media (max-width: 375px) {
.p-service-index__item {
flex: 1 1 100%; /*1列*/
}
}
/* =========================================================
画像エリア
========================================================= */
.c-figures {
display: flex;
justify-content: center;
gap: 1em 2em;
flex-wrap: wrap;
}
.c-figures img {
display: block;
}
/* =========================================================
お悩みセクション
========================================================= */
.p-problem {
position: relative;
background: #f5faf6;
text-align: center;
padding: 3em 1em 3em;
margin-bottom: 3em;
}
.p-problem__heading {
color: #10923a;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1.5em;
}
.p-problem__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch; /* ★ 高さを揃える */
gap: 0.6em;
}
.p-problem__item {
display: flex; /* ★ 中身をflex化 */
flex-direction: column; /* ★ 縦方向に積む */
justify-content: space-between; /* ★ 上下に分配 */
background: linear-gradient(0deg, #3BCA83 63%, #00958B 100%);
border-radius: 8px;
flex: 0 1 calc((100% - (0.6em * 3)) / 4);
/*min-width: 230px;
max-width: 260px;*/
padding: 2.5em 0.3em 0.3em;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.p-problem__icon {
font-size: 2rem;
padding: 0.18em; /* 内側の余白でサイズを調整 */
aspect-ratio: 1 / 1; /* ←正円にする */
border-radius: 50%;
background: #fff;
color: #00958B;
margin: 0 auto;
position: absolute;
top: -0.6em;
left: 50%;
transform: translateX(-50%);
border: 2px solid #00958b;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1; /* ←テキストを縦中央にしやすくする */
display: flex;
align-items: center;
justify-content: center;
}
.p-problem__title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.8em;
color: #fff;
text-align: center;
}
.p-problem__text {
background: #fff;
border-radius: 8px;
padding: 1.8em 0.8em;
margin: 0;
font-size: 0.85rem;
flex-grow: 1; /* ★ 高さをそろえる */
display: flex;
align-items: center; /* ★ 縦方向中央 */
justify-content: center; /* ★ 横方向中央（必要なら） */
text-align: center; /* ★ 文章を中央寄せ */
min-height: 6em;
}
.p-problem__text-inner {
display: inline-block; /* ★ 折り返しを維持したまま中央寄せ */
text-align: left; /* ← 中央揃えを解除したいならここで調整 */
line-height: 1.6;
}
.p-problem__lead {
font-size: 1.1rem;
line-height: 1.8;
}
/* --- 下の矢印画像 --- */
.p-problem__arrow {
position: absolute;
bottom: -25px; /* ← はみ出す量をここで調整 */
left: 50%;
transform: translateX(-50%);
width: 5em;
}
.p-problem__arrow img {
width: 100%;
height: auto;
display: block;
}
/* --- Version(bugyoのメッセージ内) --- */
.p-problem__list--ver2 .p-problem__item {
background: linear-gradient(0deg, #3BCA83 3%, #00958B 100%);
padding-bottom: 1.8em;
flex: 0 1 calc((90% - (0.6em * 2)) / 3);
}
.p-problem__list--ver2 .p-problem__title {
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}
/* --- 調整 --- */
@media (max-width: 900px) {
.p-problem__list { /*
flex-direction: column;
align-items: center;
gap: 1em;*/
}
.p-problem__item {
flex: 0 1 calc((100% - (0.6em * 1)) / 2); /* 2列 */
}
.p-problem__list--ver2 .p-problem__item {
flex: 0 1 calc((100% - (0.6em * 2)) / 3);
}
}
@media (max-width: 500px) {
.p-problem__list {
flex-direction: column;
align-items: center;
gap: 1em;
}
.p-problem__item {
width: 100%;
margin-bottom: 1em;
}
}
/* =========================================================
4つの強みの表
========================================================= */
.p-strength {
display: flex;
flex-direction: column;
gap: 0.8em;
}
.p-strength__item {
display: flex;
align-items: center;
gap: 1.5em;
background: #fff;
padding: 1em;
border-radius: 1em;
border: 1px solid #1ea43d;
position: relative;
min-height: 8em;
}
.p-strength__left {
display: flex;
align-items: center;
gap: 0.6em;
width: 15.5em;
}
.p-strength__number {
font-size: 2.7rem;
font-weight: 700;
color: #009f4d;
line-height: 1;
font-style: italic;
}
.p-strength__title {
font-weight: 700;
color: #009f4d;
margin-bottom: 0;
}
/* 縦線（上下につながらない） */
.p-strength__divider {
width: 1px;
background: #CCCCCC;
flex-shrink: 0;
align-self: stretch; /* flex内で高さを合わせる */
margin: 8px 0; /* 上下の余白で“短い線”に見せる */
border-radius: 1px;
}
.p-strength__right {
flex: 1;
}
.p-strength__right p {
font-size: 0.95rem;
line-height: 1.8;
margin: 0;
}
/* --- スマホ調整 --- */
@media (max-width: 767px) {
.p-strength__item {
flex-direction: column;
gap: 0.8em;
padding: 1.5em;
}
.p-strength__left {
flex-direction: row;
align-items: center;
width: 100%;
justify-content: flex-start;
}
.p-strength__number {
font-size: 2.2rem;
}
/* 縦線 → 横線 */
.p-strength__divider {
display: none;
}
.p-strength__title {
font-size: 1rem;
}
}
/* =========================================================
.before-after
========================================================= */
/* --- Before / After コンポーネント --- */
.p-before-after {
max-width: 1100px;
margin: auto;
}
/* 1セット */
.p-before-after__item {
display: flex;
align-items: center;
gap: 1.8em;
padding-top: 1em;
}
/* カード共通 */
.p-before-after__before, .p-before-after__after {
flex: 1;
border-radius: 15px;
padding: 2.6em 1.4em 1.6em; /* ★上に余白を確保（ラベルがかぶるため） */
position: relative; /* ★ラベル位置の基準にする */
text-align: center;
}
/* ラベル（Before/After共通） */
.p-before-after__label {
font-weight: 700;
font-size: 0.95em;
display: inline-block;
padding: 0.6em;
border-radius: 10em;
background: #999999;
color: #fff;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
min-width: 70%;
text-align: center;
}
/* After のラベルだけ強調 */
.p-before-after__label--after {
background: #1ea43d;
color: #fff;
}
/* Before カード */
.p-before-after__before {
background: #ffffff;
}
/* After カード */
.p-before-after__after {
background: #fffdf0;
border: 2px solid #1ea43d;
}
/* テキスト */
.p-before-after__text {
font-size: 0.9em;
display: inline-block;
text-align: left;
}
/* --- 矢印 --- */
.p-before-after__arrow img {
width: 36px;
height: auto;
display: block;
}
/* --- スマホ --- */
@media (max-width: 767px) {
.p-before-after__item {
flex-direction: column;
gap: 1.2em;
}
.p-before-after__arrow img {
width: 76px;
padding-bottom: 0.8em;
}
.p-before-after__before, .p-before-after__after {
width: 100%;
padding: 2.3em 0.8em 1.0em; /* ★上に余白を確保（ラベルがかぶるため） */
}
.p-before-after__label {
margin-bottom: 0.7em;
}
}
/* =========================================================
お知らせセクション(お知らせTOP用※TOPのと共有部分あり)
========================================================= */
.c-news--index a {
color: #222222;
}
/*SPはTOPページと同じなので*/
@media (min-width: 768px) {
.c-news.c-news--index {
width: 100%;
}
.c-news--index .c-news__item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2em;
}
.c-news--index .c-news__meta {
padding-top: 0.3em;
}
.c-news--index .c-news__date {
width: 13em;
font-size: 0.8rem;
}
.c-news--index .c-news__cat {
align-self: flex-start;
}
.c-news--index .c-news__title {
flex: 1; /* ← 残り全部幅 */
padding-left: 0 !important;
margin-top: 0 !important;
font-size: 1rem;
font-weight: 700;
}
}
/* =========================================================
お知らせSINGLE
========================================================= */
.single-meta {
padding-top: 4em;
}
.single-meta .c-news__date {
width: 11em;
padding-left: 0;
}
.single-title {
border-bottom: #ccc 1px solid;
padding-bottom: 1.2em;
margin-top: 1em;
margin-bottom: 2em;
font-size: 1.5rem;
font-weight: 400;
}
.p-single img.size-medium {
width: 820px;
}
/* =========================================================
問い合わせフォームの「STEP」
========================================================= */
.c-step {
display: flex;
justify-content: center;
align-items: stretch; /* 子要素の高さを揃える（matchHeight併用OK） */
gap: 1.5em;
margin: 0 auto 2em;
}
/* ボックス：固定ではなく伸縮可能に */
.c-step__item {
flex: 1 1 0; /* 均等 */
flex: 1 1 auto;
border: 1px solid #49A1D1;
border-radius: 8px;
color: #49A1D1;
background: #fff;
text-align: center;
font-weight: 700;
line-height: 1.3;
font-size: .85rem;
padding: 1em .8em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* 現在ステップ表示 */
.c-step__item.is-current {
background: #49A1D1;
color: #fff;
}
/* 矢印（画像） */
.c-step__item::after {
content: "";
position: absolute;
right: -1.5em;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 18px;
background: url(/assets/img/arrow-blue.svg) no-repeat center / contain;
}
/* 最後の矢印は出さない */
.c-step__item:last-child::after {
content: none;
}
/* 大 */
@media (min-width:1200px) {
.c-step__item {
min-width: 15em;
}
}
/* スマホ対応 */
@media (max-width:767px) {
.c-step {
gap: 0.8em;
}
.c-step__item {
padding: 0.7em .4em;
font-size: .75rem;
}
.c-step__item::after {
height: 1.1em;
width: 1.1em;
right: -1.1em;
}
}
/* ==========================================
個人情報保護方針 / 利用規約 用の縦スクロールBOX
========================================== */
.c-scroll-box {
border: 1px solid #999;
padding: 3.2em 2.2em;
max-height: 380px; /* スクロール高さ */
overflow-y: auto;
overflow-x: hidden;
line-height: 1.7;
font-size: 0.95rem;
color: #333;
scrollbar-color: #bbb #f0f0f0; /* Firefox */
}
.c-scroll-box::-webkit-scrollbar {
width: 0.8em;
}
.c-scroll-box::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}
.c-scroll-box::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 1em;
}
.c-scroll-box::-webkit-scrollbar-thumb:hover {
background: #999;
}
.c-scroll-box .c-heading-primary {
font-size: 1.1rem;
margin-bottom: 1em;
}
.c-scroll-box .c-heading-secondary {
font-size: 1rem;
margin-top: 1.6em !important;
margin-bottom: 0.5em !important;
}
.c-scroll-box .c-heading-lv3 {
font-size: 1rem;
margin-top: 1em !important;
margin-bottom: 0.5em !important;
}
.c-scroll-box .c-indentbox {
padding-left: 0 !important;
}
/* ==========================================
同意チェック
========================================== */
.c-agreement {}
/* 無効化中はクリック不可 */
.c-agreement__btn.is-disabled {
pointer-events: none; /* ← これが超重要 */
opacity: .6;
}
.c-agreement label {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* チェックボックスのベース */
.c-check input[type="checkbox"] {
width: 1.4em;
height: 1.4em;
appearance: none;
border: 1px solid #999;
border-radius: 0;
display: inline-block;
vertical-align: middle;
margin-right: .5em;
cursor: pointer;
background-color: #fff;
position: relative;
}
/* チェックマーク（細線の✓） */
.c-check input[type="checkbox"]:checked {
background: #0F6BB9;
}
.c-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 0.35em;
top: 0.1em;
width: 0.6em;
height: 0.8em;
border-right: 2px solid #fff; /* ✓の色 */
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}