@charset "utf-8";

/* ==================================
Health Management
================================== */

/* -----------------------------
Reset
----------------------------- */

*,
*::before,
*::after{
box-sizing:border-box;
}

img{
display:block;
max-width:100%;
height:auto;
}

ul{
margin:0;
padding:0;
list-style:none;
}

p,
h1,
h2{
margin:0;
}


/* ==================================
共通ページタイトル
（サステナビリティと揃える）
================================== */

.m_pageTitle .p_title{
text-align:center;
}

.m_pageTitle .p_title img{
display:block;
width:auto;
height:25px;   /* ← SVGサイズ調整 */
max-width:none;
margin:0 auto 12px;
}

.m_pageTitle .p_title span{
display:block;
}


/* ==================================
Page
================================== */

.healthPage{
max-width:1100px;
margin:0 auto;
padding:90px 40px 50px;
}


/* ==================================
Main Title
================================== */

.healthPage .pageTitle{
text-align:center;

font-size:28px;

font-weight:500;

line-height:1.5;

letter-spacing:.05em;

color:#111;

margin-bottom:70px;
}


/* ページタイトル上の余白を詰める */
.healthPage .pageTitle{

margin-top:-50px;

}

.healthPage .pageTitle::after{

content:"";

display:block;

width:1px;

height:42px;

background:#5c5c5c;

margin:18px auto 0;

}

.healthTitle img{
display:block;
height:20px;
width:auto;
margin:0 auto 10px;
}

/* pageTitle内 サブタイトル */
.pageTitle span{

display:block;

margin-top:10px;

font-size:28px;

font-weight:400;

line-height:1.5;

letter-spacing:.08em;

color:#d5af2c;

}

/* ==========================
タイトルを前面表示
========================== */

.healthPage{
position:relative;
z-index:10;
}

.healthPage .pageTitle{

position:relative;

z-index:20;

text-align:center;

}

/* 背景より前面 */
.m_bgScreen{

position:relative;

z-index:1;

}


/* ==================================
Lead
================================== */

.healthLead{

display:flex;

gap:80px;

align-items:flex-start;

}

.healthLead_text{

flex:1;

min-width:0;

}

/* 本文文字サイズ */
.healthLead_text p{

font-size:20px;

line-height:1.7;

}

/* 段落間 */
.healthLead_text p + p{

margin-top:1.6em;

}

/* ==================================
Image
================================== */

.healthLead_img{

flex:0 0 300px;

align-self:flex-start;

}

.healthLead_img img{

width:100%;

box-shadow:
0 18px 40px rgba(0,0,0,.08);

}


/* ==================================
Policy
================================== */

.healthPolicy{

max-width:900px;

margin:110px auto 0;

padding:70px 80px;

background:#faf6e6;

position:relative;

}

.healthPolicy::before{

content:"";

position:absolute;

left:50%;

top:-55px;

width:1px;

height:40px;

background:#111;

transform:translateX(-50%);

}


/* ==================================
H2
================================== */

.policyTitle{

text-align:center;

font-size:24px;

font-weight:500;

line-height:1.5;

letter-spacing:.06em;

color:#111;

margin-bottom:42px;

}

.policyTitle::after{

content:"";

display:block;

width:80px;

height:2px;

margin:18px auto 0;

background:#d5af2c;

}


/* ==================================
List
================================== */

.healthList{

display:flex;

flex-direction:column;

gap:10px;

}

.healthList li{

position:relative;

padding-left:26px;

font-size:20px;

line-height:1.7;

color:#222;

}

.healthList li::before{

content:"";

position:absolute;

left:0;

top:13px;

width:10px;

height:1px;

background:#d5af2c;

}


/* ==================================
Tablet
================================== */

@media screen and (max-width:960px){

.healthPage{

padding:70px 32px 70px;

}

.healthLead{

gap:45px;

}

.healthLead_img{

flex-basis:220px;

}

.healthPolicy{

padding:55px 48px;

}

}


/* ==================================
SP
================================== */

@media screen and (max-width:768px){

.m_pageTitle .p_title img{

height:16px;

margin-bottom:8px;

}

.healthPage{

padding:56px 24px 40px;

}

.healthPage .pageTitle{

font-size:22px;

margin-bottom:45px;

}

.healthPage .pageTitle::after{

height:32px;

}

.healthLead{

display:block;

}

.healthLead_text p{

font-size:16px;

line-height:1.9;

}

.healthLead_img{

width:72%;

max-width:260px;

margin:30px auto 0;

}

.healthPolicy{

margin-top:70px;

padding:40px 28px;

}

.healthPolicy::before{

top:-40px;

height:28px;

}

.policyTitle{

font-size:24px;

margin-bottom:30px;

}

.healthList li{

font-size:15px;

}

}

@media screen and (max-width:768px){

.pageTitle span{
font-size:14px;
}

}

/* ==================================
Small SP
================================== */

@media screen and (max-width:374px){

.healthPage{

padding:48px 20px 70px;

}

.healthPolicy{

padding:36px 20px;

}

.healthPage .pageTitle{

font-size:24px;

}

}


/* =============================
Bottom Image
============================= */

.healthBottomImg{

max-width:1100px;

/* 上を広げる */
margin:100px auto -40px;

}

.healthBottomImg img{

display:block;

width:100%;

height:auto;

}


/* SP */
@media screen and (max-width:768px){

.healthBottomImg{

/* 上を広げる・下を少し詰める */
margin:60px auto -20px;

}

}