/* =============================
   ヒーローメッセージセクション
============================= */

.hero-section{
background-color:#fdf6f0;
padding-top:80px;
padding-bottom:80px;
}

/* タイトル */
.hero-title{
font-size:36px;
font-weight:700;
color:#333;
margin-bottom:60px;
text-align:center;
width:100%;
display:block;
}

/* 画像 */

.hero-img{
width:100%;
height:auto;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
transition:0.5s;
}

.hero-img:hover{
transform:scale(1.05);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* 文章 */

.tokucho p{
font-size:16px;
line-height:1.8;
color:#555;
}

/* ================================
   私たちにお任せください
================================ */

.strength-card{
background:#ffffff;
padding:25px;
border-radius:12px;
transition:0.3s;
height:100%;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
text-align:center;
}

.strength-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.strength-card img{
border-radius:8px;
transition:0.4s;
}

.strength-card:hover img{
transform:scale(1.05);
}

.strength-card h3{
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}

.desc{
font-size:14px;
line-height:1.8;
color:#555;
}

.icon-wrap{
text-align:center;
font-size:30px;
color:#ff7f50;
transition:0.3s;
margin-bottom:10px;
}

.strength-card:hover .icon-wrap{
transform:scale(1.2);
color:#ff4500;
}

/* ================================
   OEM
================================ */

.oem-section{
background:#f7fbff;
}

.oem-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
height:100%;
position:relative;
transition:0.3s;
}

.oem-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.oem-number{
position:absolute;
top:-20px;
left:20px;
font-size:60px;
font-weight:700;
color:#e6f0ff;
}

.oem-card h4{
font-weight:700;
margin-bottom:15px;
}

.oem-card p{
font-size:14px;
line-height:1.8;
}

/* ================================
   工場設備
================================ */

.facility-img{
width:320px;
height:320px;
object-fit:cover;
border-radius:50%;
}

.section-title{
font-size:32px;
font-weight:700;
letter-spacing:0.05em;
}

.facility-card{
padding:15px;
text-align:center;
}

.facility-card img{
border-radius:10px;
transition:0.4s;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.figure-caption{
margin-top:10px;
font-weight:600;
font-size:16px;
color:#333;
}

/* =========================
   お知らせ
========================= */

.news-section{
background:#f8f9fa;
}

.news-title{
font-size:32px;
font-weight:700;
letter-spacing:0.05em;
}

.news-list{
list-style:none;
padding:0;
margin:0 auto;
max-width:800px;
max-height:210px;
overflow-y:auto;
}

.news-item{
display:flex;
align-items:center;
padding:18px 20px;
border-bottom:1px solid #e5e5e5;
transition:0.3s;
}

.news-item:hover{
background:#ffffff;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.news-date{
width:140px;
font-weight:600;
color:#666;
}

.news-text{
flex:1;
}

.news-text a{
color:#007bff;
text-decoration:none;
}

.news-text a:hover{
text-decoration:underline;
}

/* ================================
   無限画像スライダー
================================ */

.slider-wrapper{
position:relative;
overflow:hidden;
width:100%;
}

.slider-wrapper::before,
.slider-wrapper::after{
content:"";
position:absolute;
top:0;
width:100px;
height:100%;
z-index:2;
pointer-events:none;
}

.slider-wrapper::before{
left:0;
background:linear-gradient(to right,#fff,transparent);
}

.slider-wrapper::after{
right:0;
background:linear-gradient(to left,#fff,transparent);
}

.slider{
display:flex;
width:max-content;
animation:sliderLoop 35s linear infinite;
padding:0;
margin:0;
}

.slider:hover{
animation-play-state:paused;
}

.slider li{
list-style:none;
margin:0 10px;
overflow:hidden;
border-radius:8px;
}

.slider img{
height:180px;
width:auto;
display:block;
transition:transform .5s ease;
}

.slider img:hover{
transform:scale(1.08);
}

@keyframes sliderLoop{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* ================================
   レスポンシブ
================================ */

@media (max-width:991px){

.hero-title{
font-size:28px;
margin-bottom:40px;
}

.tokucho p{
font-size:15px;
}

}

@media (max-width:768px){

.section-title{
font-size:26px;
}

.strength-card{
margin-bottom:20px;
}

.news-item{
flex-direction:column;
align-items:flex-start;
}

.news-date{
margin-bottom:5px;
width:auto;
}

}

@media (max-width:576px){

.slider{
animation:sliderLoop 60s linear infinite;
}

.slider img{
height:100px;
}

}