* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
/* ---------------------------
Main（この領域だけ大きな背景画像）
---------------------------- */
.q-container {
position: relative;
min-height: 60vh; /* ページが短い時の見た目担保 */
display: grid;
place-items: center;
padding: 32px 16px;
isolation: isolate; /* ::before 背景と子の重なり制御 */
background-image: url("./images/haikei23.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* ========== .q-content（ベース） ========== */
.q-content {
width: 100%;
max-width: 920px;
background: #ffffff;
border: 5px solid #00ADFF;
box-shadow: var(--shadow);
color:#000000; /*本文カラー 171364 */
font-size:1.1em /*本文サイズ*/
}
/* ========== SP（上書き） ========== */
@media (max-width: 767.98px) {
.q-content {
padding: 35px 40px;
margin-top: 50px;
border-radius: 90px; /* SPは控えめな角丸でないと崩れやすい */
border: 4px solid #00ADFF;
}
}
/* ========== PC（上書き） ========== */
@media (min-width: 768px) {
.q-content {
padding: 48px 114px 58px;
margin-top: 50px;
border-radius: 160px; /* PCは大きめの角丸でもOK */
}
}
/* 見出し2 */
.q-content h2 {
text-align: center;
font-weight: 400; /* 文字色変更時は調整のこと */
}
/* ========== SP（上書き） ========== */
@media (max-width: 767.98px) {
.q-content h2 {
margin-top: 20px;
margin-bottom: 15px;
font-size: 22px;
}
}
/* ========== PC（上書き） ========== */
@media (min-width: 768px) {
.q-content h2 {
margin-top: 35px;
margin-bottom: 15px;
font-size: 32px;
}
}
/* 見出し3（装飾） */
.q-content h3 {
font-size: 1em;
margin: 20px 0 0px;
font-weight: normal;
}
.q-content h3::before {
content: "__";
margin-right: 0.4em;
color: #000000;
font-weight: bold;
}
/* ========== .q-content q-lead その他本文 改行・行間調整（PC/SP) ========== */
/* スマホ用 */
@media (max-width: 767.98px) {
.br-sp { display: inline; }
.q-content p {
line-height: 1.8;
margin-bottom: 1.2em;
}
}
/* PC用 */
@media (min-width: 768px) {
.br-pc { display: inline; }
.q-content p {
line-height: 1.7;
margin-bottom: 1.2em;
}
}
/* ========== .q-content q-lead リード文 改行・行間調整（PC/SP) ========== */
.q-content p.q-lead { text-align: center; }
/* デフォルトは改行非表示、必要側だけ表示 */
.br-sp { display: none; }
.br-pc { display: none; }
.br-none{ display: none; }
/* スマホ用 */
@media (max-width: 767.98px) {
.br-sp { display: inline; }
.q-content p.q-lead {
line-height: 2.3;
margin-bottom: 1.2em;
}
}
/* PC用 */
@media (min-width: 768px) {
.br-pc { display: inline; }
.q-content p.q-lead {
line-height: 2.1;
margin-bottom: 1.2em;
}
}
/* ========== .q-content-image 組み合わせロゴ（ベース） ========== */
.q-content-image {
width: 100%;
max-width: 350px; /* SP基準サイズ */
margin: 25px auto;
text-align: center;
}
.q-content-image img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* PCで少し大きく */
@media (min-width: 768px) {
.q-content-image { max-width: 500px; } /* PCサイズ */
}
/* ========== .q-content-image2 タイポ・シンボル （ベース） ========== */
.q-content-image2 {
width: 100%;
max-width: 200px; /* SP基準サイズ */
margin: 25px auto;
text-align: center;
}
.q-content-image2 img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* PCで少し大きく */
@media (min-width: 768px) {
.q-content-image2 { max-width: 280px; } /* PC基準サイズ*/
}
/* ========== .q-content-image3 空画像 （ベース） ========== */
.q-content-image3 {
width: 100%;
max-width: 300px; /* SP基準サイズ */
margin: 25px auto;
text-align: center;
}
.q-content-image3 img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-radius: 0px; /* 画像の角丸 */
}
/* PCで少し大きく */
@media (min-width: 768px) {
.q-content-image3 { max-width: 100%;margin-bottom: 10px; } /* PC基準サイズ*/
}
/* 製品画像並べるスペース */
/* =========================
Base (SPを基準に定義)
========================= */
:root{
--thumb-size: 45px; /* SPのサムネサイズ */
--gap-x: 16px; /* 横間隔 */
--gap-y: 22px; /* 行間隔 */
--text-color: #1d2561;
--font-size: 14px;
--line-height: 1.7;
}
.product-list{
list-style: none;
margin: 10px 0px 0px 0px;
padding: 0;
}
.product-item{
display: flex;
align-items: flex-start; /* テキスト上端寄せ */
column-gap: var(--gap-x);
padding-block: calc(var(--gap-y)/2);
}
.product-item + .product-item{
margin-top: calc(var(--gap-y)/2);
}
.thumb{
width: var(--thumb-size);
height: auto;
object-fit: cover;
display: block;
}
.product-item a {
text-decoration: none;
}
.qp-text{
color: var(--text-color);
font-size: var(--font-size);
line-height: var(--line-height);
hanging-punctuation: first allow-end;
text-wrap: pretty;
}
/* 3行目など：テキストだけ5px下から開始 */
.qp-text.offset-5{
margin-top: 5px;
}
/* =========================
ここからデスクトップに向けて拡張
Tablet～PC（768px以上）
========================= */
@media (min-width: 768px){
:root{
--thumb-size: 50px;
--gap-x: 16px;
--gap-y: 28px;
--font-size: 1em;
}
}
/* =========================
PC（1024px以上）
========================= */
@media (min-width: 1024px){
:root{
--thumb-size: 70px;
--gap-x: 20px;
--gap-y: 32px;
--font-size: 1em; /* 必要なら20pxなどに調整 */
}
/* 行間や余白の微調整 */
.product-item{
padding-block: 10px;
}
}
/* 白い記事ブロック２ */
.q-content2 {
position: relative;
background: #fff; /* 白ベタ */
}
/* 以下は社長画像と挨拶のセクション */
#q-pres-name { text-align: right; }
/* 代表メッセージ（ベース：SP縦積み、画像→テキスト） */
.q-content .q-pres-section {
display: block;
margin-top: 1rem;
}
.q-content .q-pres-section .q-pres-media {
margin-bottom: 1rem;
}
.q-content .q-pres-section .q-pres-text {
line-height: 1.9;
min-width: 0;
}
.q-content .q-pres-section .q-pres-text p {
margin: 0 0 1em;
text-align: justify; /* left にしてもOK */
}
/* --- SP：画像を200px・中央固定 --- */
@media (max-width: 767.98px) {
.q-content .q-pres-section .q-pres-media {
display: flex;
justify-content: center;
}
.q-content .q-pres-section .q-pres-media img {
width: 200px; /* 必要なら !important を付与 */
max-width: 200px;
height: auto;
border-radius: 0px; /* 画像の角丸 */
object-fit: cover;
}
}
/* --- PC：左=テキスト｜右=画像（2カラム） --- */
@media (min-width: 768px) {
.q-content .q-pres-section {
display: flex;
align-items: flex-start;
gap: clamp(16px, 3vw, 32px);
}
.q-content .q-pres-section .q-pres-text { order: 1; flex: 1 1 60%; }
.q-content .q-pres-section .q-pres-media { order: 2; flex: 0 0 40%; }
.q-content .q-pres-section .q-pres-media img {
width: 100%;
height: auto;
border-radius: 0px; /* 画像の角丸 */
object-fit: cover;
}
}
/* ---最後のブロックの表示位置--- */
section.q-content.qc-lastone{
margin-bottom:70px;
}