@charset "UTF-8";

@-webkit-keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

@keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

:root {
--easing: cubic-bezier(.2, 1, .2, 1);
--transition: .8s var(--easing);
}


/*PC*/
@media print, screen and (min-width: 768px) {
#hed .hed_img .bg_img{
background-image:url("../images/about/main_img.jpg");
}

#about{
margin:0 auto 200px;

}

#about .block{
position:relative;
margin-bottom: 160px;
}

#about .block .ttl{
font-size: 5rem;
font-weight: 700;
line-height: 1;
margin: 0 0 80px;
display: block;
text-align: center;
}

#about .block .ttl span{
display: block;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
margin: 0 0 10px;
}

#about .block .s_ttl{
text-align: center;
font-size: 2.6rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .1rem;
margin: 0 0 60px;
}

#about .block .slider3 .slick-slide{
margin: 0 6px;
}

#about .block .slider3 .slick-slide img{
border-radius: .4rem;
overflow: hidden;
}



/*創業の精神・経営理念（CSRページから移行）
------------------------------------------*/

/* 創業の精神 リード文 */
#about #spirit .ozs-lead{
width: 80%;
margin: 0 auto 46px;
text-align: center;
}

#about #spirit .ozs-leadTxt{
font-size: 2rem;
font-weight: 800;
line-height: 1.5;
margin: 0;
}

#about .box{
width: 80%;
margin: 0 auto 60px;
background: #f2f5fc;
padding: 35px;
box-sizing: border-box;
}

#about .box:last-child{
margin-bottom: 0;
}

#about .box h4{
font-size: 2.2rem;
font-family: "Zen Old Mincho", serif;
line-height: 1;
text-align: center;
margin: 0 0 40px;
}

#about .list02{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin:0 auto 0;
}

#about .list02 li{
width: 49%;
margin-bottom: 2%;
background: #FFF;
padding: 15px;
box-sizing: border-box;
}

#about .list02 li h5{
font-size: 1.5rem;
font-family: "Zen Old Mincho", serif;
line-height: 1.4;
margin: 0 0 20px;
}

#about .box .rinen_box{
border: 1px solid rgba(0,0,0,.1);
padding: 35px;
box-sizing: border-box;
border-radius:1rem;
background:#FFF;
margin: 0 0 40px;
}

#about .box .rinen_box:last-child{
margin-bottom: 0;
}

#about .box .rinen_box h5{
font-size: 1.4rem;
font-family: "Zen Old Mincho", serif;
line-height: 1.4;
margin: 0 0 20px;
}

#about .box .rinen_box p{
font-family: "Zen Old Mincho", serif;
font-size: 1.2rem;
line-height:2.2;
}


/*数字で見る小澤物産（採用サイトから移設）
------------------------------------------*/
#about #data .data_wrap_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}

#about #data .data_wrap_box::after{
display: block;
width: 30%;
content: "";
}

#about #data .data_box{
width: 30%;
margin-bottom: 80px;
}

#about #data .data_box h3{
padding: 10px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.4;
color: #fff;
background: linear-gradient(90deg, #00488a, #087fba);
}

#about #data .data_box .txtbox{
margin-top: 30px;
text-align: center;
}

#about #data .data_box .txtbox h4{
font-size: 4rem;
font-weight: 700;
line-height: 1;
}

#about #data .data_box .txtbox h4 span{
margin-right: 10px;
font-size: 2.6em;
background-image: radial-gradient(rgba(8,127,186,1), rgba(0,0,0,1) 80%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#about #data .data_box .imgbox{
margin-top: 30px;
}

#about #data .chart_area{
width: 90%;
margin: 0 auto;
}

/* 円グラフの凡例 */
#about #data .pie-chart ol{
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 15px 0 0;
padding: 0;
}

#about #data .pie-chart li{
display: flex;
align-items: center;
margin: 0 5px;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}

#about #data .pie-chart li::before{
display: inline-block;
flex: 0 0 28px;
width: 28px;
height: 12px;
margin-right: 5px;
content: "";
}

#about #data .pie-chart li span{
margin-right: 10px;
font-size: .7em;
font-weight: 600;
}

/* 育休・産休取得 */
#about #data .data_box .leave-text{
margin-top: 30px;
text-align: left;
}

#about #data .data_box .leave-text p{
display: block;
margin: 0;
padding: 0;
}

#about #data .data_box .leave-text .leave-year{
margin-top: 18px;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.45;
}

#about #data .data_box .leave-text .leave-year:first-child{
margin-top: 0;
}

#about #data .data_box .leave-text .leave-detail{
padding-left: 1em;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.55;
}

/* 男女比 */
#about #data .pie-chart01 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart01 li:nth-child(2)::before{background-color:#087fba;}

/* 年齢構成比 */
#about #data .pie-chart02 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart02 li:nth-child(2)::before{background-color:#087fba;}
#about #data .pie-chart02 li:nth-child(3)::before{background-color:#005f9e;}
#about #data .pie-chart02 li:nth-child(4)::before{background-color:#478193;}
#about #data .pie-chart02 li:nth-child(5)::before{background-color:#6ba0d2;}

/* 居住地割合 */
#about #data .pie-chart03 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart03 li:nth-child(2)::before{background-color:#087fba;}
#about #data .pie-chart03 li:nth-child(3)::before{background-color:#005f9e;}
#about #data .pie-chart03 li:nth-child(4)::before{background-color:#478193;}
#about #data .pie-chart03 li:nth-child(5)::before{background-color:#6ba0d2;}
#about #data .pie-chart03 li:nth-child(6)::before{background-color:#6f7ce1;}
#about #data .pie-chart03 li:nth-child(7)::before{background-color:#2ebdcc;}
#about #data .pie-chart03 li:nth-child(8)::before{background-color:#3bb6a0;}

/*message
------------------------------------------*/
#about .message_block{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}

#about .message_block .img{
width: 40%;
}

/* 画像を固定せず、文章と一緒にスクロールさせる
   （元は position:sticky で画像が貼り付き、文字だけが動く挙動でした） */
#about .message_block .img .sticky {
position: static;
top: auto;
}

#about .message_block .txt_box{
width: 55%;
}


#about .message_block .txt_box h3{
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 40px;
}

#about .message_block .txt_box p{
font-weight: 500;
margin: 0 0 60px;
}

#about .message_block .txt_box h4{
text-align: right;
line-height: 1;
}

#about .message_block .txt_box h4 span{
font-size: 1.2rem;
margin-left: 10px;
}

/*profile
---------------------------------------*/
#about .co_table{
width:60%;
margin: 0 auto;
background: #FFF;
min-width: 800px;
}

#about .co_table tr{
border-top: 1px solid #0066a1;
border-bottom: 1px solid #0066a1;

}

#about .co_table th{
width: 20%;
text-align: left;
padding: 15px;
box-sizing: border-box;
}

#about .co_table{
table-layout: fixed;
}

#about .co_table td{
padding: 15px;
box-sizing: border-box;
}

/*profile 連絡先/住所（拠点一覧）
---------------------------------------*/
#about .ozp-offices{
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
}

#about .ozp-group{
min-width: 0;
}

#about .ozp-groupTtl{
font-size: 1rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .05em;
color: #0066a1;
border-left: 3px solid #0066a1;
padding-left: 12px;
margin: 0 0 14px;
}

#about .ozp-group--solo{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 18px;
}

#about .ozp-group--solo .ozp-groupTtl{
margin: 0;
flex: 0 0 auto;
}

#about .ozp-soloTel{
margin: 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .02em;
font-feature-settings: "tnum";
}

#about .ozp-list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
list-style: none;
margin: 0;
padding: 0;
}

#about .ozp-item{
background: #f2f5fc;
border-radius: 4px;
padding: 16px 18px;
box-sizing: border-box;
min-width: 0;
}

#about .ozp-name{
font-size: .95rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 10px;
padding: 0 0 8px;
border-bottom: 1px solid #d5dfee;
}

#about .ozp-addr{
margin: 0;
font-size: .875rem;
line-height: 1.7;
}

#about .ozp-tel{
margin: 6px 0 0;
font-size: .875rem;
line-height: 1.7;
font-weight: 700;
letter-spacing: .02em;
font-feature-settings: "tnum";
}

/* 拠点名を持たないカード（保険部・セイバープラスZ）*/
#about .ozp-item > .ozp-addr:first-child{
padding-top: 2px;
}

#about .history_block{
width: 100%;
margin: 0 auto 120px;
background:#f2f5fc;
padding:55px;
box-sizing: border-box;
}

#about .history_block .ttl{
margin:0 0 80px;
display: block;
text-align: center;
font-size:5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -.1rem;
}

#about .history_block .ttl span{
display: block;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
margin:0 0 10px;
letter-spacing: 0;
}

#about .history_block .history_box{
overflow-x: scroll;
padding: 0 0 10px;
}

#about .history_block .history_box ul{
width: 14800px;
display: flex;
flex-wrap: wrap;
}

#about .history_block .history_box ul li{
width: 360px;
border-right:1px solid #0066a1;
padding:15px;
box-sizing: border-box;
}

#about .history_block .history_box ul li h3{
color: #0066a1;
font-size: 1.4rem;
line-height: 1;
margin: 0 0 15px;
}

#about .history_block .history_box ul li h3 span{
font-size: 1rem;
}

#about .history_block .history_box ul li div{
background:rgba(255,255,255,.8);
}

#about .history_block .history_box ul li div:nth-child(odd){
background:#f2f5fc;
}

#about .history_block .history_box ul li div h4{
font-size: .8rem;
line-height: 1;
margin: 0 0 5px;
color: #FFF;
background: #0066a1;
display:table;
padding: 5px 8px;
box-sizing: border-box;
}

#about .history_block .history_box ul li div p{
font-size: .9rem;
line-height: 1.8;
padding: 15px;
box-sizing: border-box;
}


}
/*sp*/
@media only screen and (max-width: 767px) {
#hed .hed_img .bg_img{
background-image:url("../images/about/main_img_s.jpg");
}

#about{
margin:0 auto 60px;

}

#about .block{
position:relative;
margin-bottom: 60px;
}

#about .block .ttl{
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
margin: 0 0 40px;
display: block;
text-align: center;
}

#about .block .ttl span{
display: block;
font-size: 1rem;
font-weight: 800;
line-height: 1;
margin: 0 0 10px;
}

#about .block .s_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .1rem;
margin: 0 0 30px;
text-align: center;
}

#about .block .slider3 .slick-slide{
margin: 0 6px;
}

#about .block .slider3 .slick-slide img{
border-radius: .4rem;
overflow: hidden;
}



/*創業の精神・経営理念（CSRページから移行）
------------------------------------------*/

/* 創業の精神 リード文 */
#about #spirit .ozs-lead{
width: 90%;
margin: 0 auto 30px;
text-align: center;
}

#about #spirit .ozs-leadTxt{
font-size: 1.3rem;
font-weight: 800;
line-height: 1.6;
margin: 0;
}

#about #spirit .ozs-leadTxt br{
display: none;
}

#about .box{
width: 90%;
margin: 0 auto 30px;
background: #f2f5fc;
padding: 20px;
box-sizing: border-box;
}

#about .box:last-child{
margin-bottom: 0;
}

#about .box h4{
font-size: 1.6rem;
font-family: "Zen Old Mincho", serif;
line-height: 1;
text-align: center;
margin: 0 0 20px;
}

#about .list02{
margin:0 auto 0;
}

#about .list02 li{
width:100%;
margin-bottom: 2%;
background: #FFF;
padding: 15px;
box-sizing: border-box;
}

#about .list02 li h5{
font-size: 1.2rem;
font-family: "Zen Old Mincho", serif;
line-height: 1.4;
margin: 0 0 10px;
}

#about .box .rinen_box{
border: 1px solid rgba(0,0,0,.1);
padding: 20px;
box-sizing: border-box;
border-radius:1rem;
background:#FFF;
margin: 0 0 30px;
}

#about .box .rinen_box:last-child{
margin-bottom: 0;
}

#about .box .rinen_box h5{
font-size: 1rem;
font-family: "Zen Old Mincho", serif;
line-height: 1.4;
margin: 0 0 20px;
}

#about .box .rinen_box p{
font-family: "Zen Old Mincho", serif;
font-size: .9rem;
line-height:1.8;
}


/*数字で見る小澤物産（採用サイトから移設）
------------------------------------------*/
#about #data .data_wrap_box{
width: 90%;
margin: 0 auto;
}

#about #data .data_box{
margin-bottom: 50px;
}

#about #data .data_box:last-child{
margin-bottom: 0;
}

#about #data .data_box h3{
padding: 10px;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: #fff;
background: linear-gradient(90deg, #00488a, #087fba);
}

#about #data .data_box .txtbox{
margin-top: 30px;
text-align: center;
}

#about #data .data_box .txtbox h4{
font-size: 3rem;
font-weight: 700;
line-height: 1;
}

#about #data .data_box .txtbox h4 span{
margin-right: 10px;
font-size: 2.6em;
background-image: radial-gradient(rgba(8,127,186,1), rgba(0,0,0,1) 80%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#about #data .data_box .imgbox{
width: 80%;
margin: 30px auto 0;
}

#about #data .chart_area{
width: 90%;
margin: 0 auto;
}

/* 円グラフの凡例 */
#about #data .pie-chart ol{
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 15px 0 0;
padding: 0;
}

#about #data .pie-chart li{
display: flex;
align-items: center;
margin: 0 5px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}

#about #data .pie-chart li::before{
display: inline-block;
flex: 0 0 28px;
width: 28px;
height: 12px;
margin-right: 5px;
content: "";
}

#about #data .pie-chart li span{
margin-right: 10px;
font-size: .7em;
font-weight: 600;
}

/* 育休・産休取得 */
#about #data .data_box .leave-text{
margin-top: 24px;
text-align: left;
}

#about #data .data_box .leave-text p{
display: block;
margin: 0;
padding: 0;
}

#about #data .data_box .leave-text .leave-year{
margin-top: 16px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.5;
}

#about #data .data_box .leave-text .leave-year:first-child{
margin-top: 0;
}

#about #data .data_box .leave-text .leave-detail{
padding-left: 1em;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
}

/* 男女比 */
#about #data .pie-chart01 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart01 li:nth-child(2)::before{background-color:#087fba;}

/* 年齢構成比 */
#about #data .pie-chart02 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart02 li:nth-child(2)::before{background-color:#087fba;}
#about #data .pie-chart02 li:nth-child(3)::before{background-color:#005f9e;}
#about #data .pie-chart02 li:nth-child(4)::before{background-color:#478193;}
#about #data .pie-chart02 li:nth-child(5)::before{background-color:#6ba0d2;}

/* 居住地割合 */
#about #data .pie-chart03 li:nth-child(1)::before{background-color:#00488a;}
#about #data .pie-chart03 li:nth-child(2)::before{background-color:#087fba;}
#about #data .pie-chart03 li:nth-child(3)::before{background-color:#005f9e;}
#about #data .pie-chart03 li:nth-child(4)::before{background-color:#478193;}
#about #data .pie-chart03 li:nth-child(5)::before{background-color:#6ba0d2;}
#about #data .pie-chart03 li:nth-child(6)::before{background-color:#6f7ce1;}
#about #data .pie-chart03 li:nth-child(7)::before{background-color:#2ebdcc;}
#about #data .pie-chart03 li:nth-child(8)::before{background-color:#3bb6a0;}

/*message
------------------------------------------*/
#about .message_block{
width: 90%;
margin: 0 auto;
}

#about .message_block .img{
width: 80%;
margin:0 auto 20px;
}

#about .message_block .img .sticky {
}

#about .message_block .txt_box{
width: 100%;
}


#about .message_block .txt_box h3{
font-size:1.4rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 20px;
}

#about .message_block .txt_box p{
font-weight: 500;
margin: 0 0 30px;
}

#about .message_block .txt_box h4{
text-align: right;
font-size: .8rem;
line-height: 1;
}

#about .message_block .txt_box h4 span{
font-size: 1rem;
margin-left: 10px;
}

/*profile
---------------------------------------*/
#about .co_table{
width:90%;
margin: 0 auto;
background: #FFF;
font-size: .8rem;
}

#about .co_table tr{
border-top: 1px solid #0066a1;
border-bottom: 1px solid #0066a1;

}

#about .co_table th{
width: 100%;
text-align: left;
padding:5px 5px 0;
box-sizing: border-box;
display: block;
}

#about .co_table td{
display: block;
padding:5px;
box-sizing: border-box;
}

/*profile 連絡先/住所（拠点一覧）
---------------------------------------*/
#about .ozp-offices{
display: flex;
flex-direction: column;
gap: 20px;
margin: 4px 0 8px;
min-width: 0;
}

#about .ozp-group{
min-width: 0;
}

#about .ozp-groupTtl{
font-size: .9rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .04em;
color: #0066a1;
border-left: 3px solid #0066a1;
padding-left: 10px;
margin: 0 0 10px;
}

#about .ozp-group--solo{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 14px;
}

#about .ozp-group--solo .ozp-groupTtl{
margin: 0;
}

#about .ozp-soloTel{
margin: 0;
font-size: .95rem;
font-weight: 700;
letter-spacing: .02em;
font-feature-settings: "tnum";
}

#about .ozp-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}

#about .ozp-item{
background: #f2f5fc;
border-radius: 4px;
padding: 12px 14px;
box-sizing: border-box;
min-width: 0;
}

#about .ozp-name{
font-size: .85rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 8px;
padding: 0 0 6px;
border-bottom: 1px solid #d5dfee;
}

#about .ozp-addr{
margin: 0;
font-size: .8rem;
line-height: 1.7;
}

#about .ozp-tel{
margin: 4px 0 0;
font-size: .8rem;
line-height: 1.7;
font-weight: 700;
letter-spacing: .02em;
font-feature-settings: "tnum";
}

/* 拠点名を持たないカード（保険部・セイバープラスZ）*/
#about .ozp-item > .ozp-addr:first-child{
padding-top: 2px;
}


#about .history_block{
width: 100%;
margin: 0 auto 60px;
background:#f2f5fc;
padding:25px;
box-sizing: border-box;
}

#about .history_block .ttl{
margin:0 0 40px;
display: block;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -.1rem;
}

#about .history_block .ttl span{
display: block;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
margin:0 0 10px;
letter-spacing: 0;
}

#about .history_block .history_box{
overflow-x: scroll;
padding: 0 0 10px;
}

#about .history_block .history_box ul{
width: 12340px;
display: flex;
flex-wrap: wrap;
}

#about .history_block .history_box ul li{
width: 300px;
border-right:1px solid #0066a1;
padding:10px;
box-sizing: border-box;
}

#about .history_block .history_box ul li h3{
color: #0066a1;
font-size: 1.2rem;
line-height: 1;
margin: 0 0 15px;
}

#about .history_block .history_box ul li h3 span{
font-size: .8rem;
}

#about .history_block .history_box ul li div{
background:rgba(255,255,255,.8);
}

#about .history_block .history_box ul li div:nth-child(odd){
background:#f2f5fc;
}

#about .history_block .history_box ul li div h4{
font-size: .8rem;
line-height: 1;
margin: 0 0 5px;
color: #FFF;
background: #0066a1;
display:table;
padding: 5px 8px;
box-sizing: border-box;
}

#about .history_block .history_box ul li div p{
font-size: .8rem;
line-height: 1.8;
padding: 10px;
box-sizing: border-box;
}


}


/* ============================================================
   OUR HISTORY / 私たちの歩み ―― 沿革タイムライン
   タイトルは共通 .ttl txt_grad を使用。書体はサイト共通（Noto Sans JP / .en）。
   ============================================================ */
#about .ozh{position:relative}
#about .ozh *{box-sizing:border-box}

/*PC*/
@media print, screen and (min-width: 768px) {
#about .ozh .timeline{position:relative;max-width:1080px;margin:0 auto}
#about .ozh .timeline .spine{position:absolute;top:10px;bottom:10px;left:50%;width:1px;transform:translateX(-50%);
	background:linear-gradient(180deg,transparent,#dbe2ec 8%,#dbe2ec 92%,transparent)}
#about .ozh .entry{position:relative;display:grid;grid-template-columns:1fr 1fr;
	column-gap:clamp(60px,9vw,120px);align-items:center;padding:50px 0;
	opacity:0;transform:translateY(46px);transition:opacity 1s var(--easing),transform 1.1s var(--easing)}
#about .ozh .entry.in{opacity:1;transform:none}
#about .ozh .node{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;
	background:#fff;border:2px solid var(--accent);transform:translate(-50%,-50%);z-index:3;box-shadow:0 0 0 6px #fff}
#about .ozh .node::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--accent);
	opacity:0;transform:scale(.3);transition:all .7s var(--easing) .2s}
#about .ozh .entry.in .node::after{opacity:1;transform:none}
#about .ozh .media{position:relative}
#about .ozh .frame{position:relative;aspect-ratio:3/2;border-radius:.4rem;overflow:hidden;
	box-shadow:0 22px 48px -28px rgba(0,50,95,.5);background:#eef1f6}
#about .ozh .frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.4s var(--easing)}
#about .ozh .entry:hover .frame img{transform:scale(1.07)}
#about .ozh .body{max-width:30em}
#about .ozh .era{display:flex;align-items:baseline;gap:16px;margin:0 0 20px}
#about .ozh .era .idx{font-size:3.4rem;font-weight:700;line-height:.8;letter-spacing:-.05rem;color:var(--accent)}
#about .ozh .era .lbl{display:flex;flex-direction:column;gap:5px}
#about .ozh .era .lbl b{font-size:1.4rem;font-weight:800;line-height:1;letter-spacing:.02em}
#about .ozh .era .lbl i{font-size:.95rem;font-style:normal;letter-spacing:.06em;color:#5a6b80}
#about .ozh .body h3,
#about .ozc .ozc-leadTxt{font-size:2rem;font-weight:800;line-height:1.5;margin:0 0 20px}
#about .ozh .body h3::before{content:"";display:block;width:34px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 22px}
#about .ozh .body p{font-weight:500;line-height:1.9;color:#333}
#about .ozh .entry:nth-child(even) .media{order:2}
#about .ozh .entry:nth-child(even) .body{order:1;justify-self:end;padding-right:6px}
#about .ozh .entry:nth-child(odd) .body{justify-self:start;padding-left:6px}
}

/*sp*/
@media only screen and (max-width: 767px) {
#about .ozh .timeline{position:relative;width:100%;margin:0 auto}
#about .ozh .timeline .spine{position:absolute;top:10px;bottom:10px;left:7px;width:1px;
	background:linear-gradient(180deg,transparent,#dbe2ec 6%,#dbe2ec 94%,transparent)}
#about .ozh .entry{position:relative;display:block;padding:22px 0 22px 32px;
	opacity:0;transform:translateY(36px);transition:opacity .9s var(--easing),transform 1s var(--easing)}
#about .ozh .entry.in{opacity:1;transform:none}
#about .ozh .node{position:absolute;left:7px;top:8px;width:13px;height:13px;border-radius:50%;
	background:#fff;border:2px solid var(--accent);transform:translateX(-50%);z-index:3;box-shadow:0 0 0 4px #fff}
#about .ozh .node::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
#about .ozh .media{margin:0 0 18px}
#about .ozh .frame{position:relative;aspect-ratio:16/10;border-radius:.4rem;overflow:hidden;
	box-shadow:0 14px 28px -20px rgba(0,50,95,.5);background:#eef1f6}
#about .ozh .frame img{width:100%;height:100%;object-fit:cover;display:block}
#about .ozh .body{width:100%}
#about .ozh .era{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
#about .ozh .era .idx{font-size:2.6rem;font-weight:700;line-height:.8;color:var(--accent)}
#about .ozh .era .lbl b{font-size:1.2rem;font-weight:800;line-height:1;display:block;margin:0 0 4px}
#about .ozh .era .lbl i{font-size:.85rem;font-style:normal;color:#5a6b80}
#about .ozh .body h3,
#about .ozc .ozc-leadTxt{font-size:1.3rem;font-weight:800;line-height:1.6;margin:0 0 14px}
#about .ozh .body h3::before{content:"";display:block;width:30px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 16px}
#about .ozh .body p{font-weight:500;line-height:1.85;color:#333}
}


/* ============================================================
   HISTORY OF A COMPANY / 社史 ―― ポップアップ年表
   .ozc = OZawa Company-history
   ============================================================ */
#about .ozc *,
.ozc-modal *{box-sizing:border-box}

/* 開くボタン（共通） */
#about .ozc .ozc-lead{text-align:center}
#about .ozc .ozc-open{
	position:relative;display:inline-flex;align-items:center;gap:18px;
	border:1px solid #0066a1;border-radius:100px;background:#fff;cursor:pointer;
	color:#0066a1;overflow:hidden;transition:color .5s var(--easing),box-shadow .5s var(--easing);
	font-family:inherit}
#about .ozc .ozc-open::before{
	content:"";position:absolute;inset:0;background:#0066a1;border-radius:100px;
	transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--easing)}
#about .ozc .ozc-open:hover::before{transform:scaleX(1)}
#about .ozc .ozc-open:hover{color:#fff;box-shadow:0 18px 34px -20px rgba(0,80,150,.7)}
#about .ozc .ozc-openIn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#about .ozc .ozc-openIn .en{font-weight:700;letter-spacing:.14em;line-height:1}
#about .ozc .ozc-openJa{font-weight:800;line-height:1}
#about .ozc .ozc-openArw{
	position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
	background:#0066a1;transition:background .5s var(--easing);flex:0 0 auto}
#about .ozc .ozc-open:hover .ozc-openArw{background:#fff}
#about .ozc .ozc-openArw::before,
#about .ozc .ozc-openArw::after{content:"";position:absolute;background:#fff;transition:background .5s var(--easing)}
#about .ozc .ozc-openArw::before{top:50%;left:11px;width:14px;height:1.5px;margin-top:-.75px}
#about .ozc .ozc-openArw::after{top:50%;right:11px;width:8px;height:1.5px;transform-origin:right center;transform:rotate(45deg);margin-top:-.75px}
#about .ozc .ozc-open:hover .ozc-openArw::before,
#about .ozc .ozc-open:hover .ozc-openArw::after{background:#0066a1}

/* モーダル本体（共通） */
.ozc-modal[hidden]{display:none}
.ozc-modal{
	position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
	opacity:0;visibility:hidden;transition:opacity .5s var(--easing),visibility .5s var(--easing)}
.ozc-modal.is-open{opacity:1;visibility:visible}
.ozc-ovl{position:absolute;inset:0;background:rgba(0,26,48,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}
.ozc-dialog{
	position:relative;display:flex;flex-direction:column;background:#fff;overflow:hidden;
	box-shadow:0 46px 90px -34px rgba(0,30,60,.6);
	opacity:0;transform:translateY(30px) scale(.985);
	transition:opacity .6s var(--easing),transform .7s var(--easing)}
.ozc-modal.is-open .ozc-dialog{opacity:1;transform:none}
body.ozc-lock{overflow:hidden}

.ozc-head{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	border-bottom:1px solid #dbe2ec;background:#fff}
.ozc-mttl{font-weight:800;line-height:1.2;letter-spacing:.02em}
.ozc-mttl .en{display:block;color:#0066a1;font-weight:700;letter-spacing:.14em;line-height:1}
.ozc-close{
	position:relative;flex:0 0 auto;border:1px solid #dbe2ec;border-radius:50%;background:#fff;cursor:pointer;
	transition:background .4s var(--easing),border-color .4s var(--easing),transform .4s var(--easing)}
.ozc-close:hover{background:#0066a1;border-color:#0066a1;transform:rotate(90deg)}
.ozc-close span{position:absolute;top:50%;left:50%;height:1.5px;background:#0f2a44;transition:background .4s var(--easing)}
.ozc-close:hover span{background:#fff}
.ozc-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.ozc-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

.ozc-nav{flex:0 0 auto;display:flex;gap:8px;background:#f7f9fd;border-bottom:1px solid #dbe2ec}
.ozc-navbtn{
	flex:0 0 auto;text-align:left;background:#fff;border:1px solid #dbe2ec;border-radius:100px;
	cursor:pointer;color:#0f2a44;font-family:inherit;
	transition:background .4s var(--easing),border-color .4s var(--easing),color .4s var(--easing)}
.ozc-navbtn b{display:block;font-weight:800;line-height:1.2}
.ozc-navbtn i{display:block;font-style:normal;color:#5a6b80;letter-spacing:.06em;transition:color .4s var(--easing)}
.ozc-navbtn:hover{border-color:#0066a1;color:#0066a1}
.ozc-navbtn.is-active{background:#0066a1;border-color:#0066a1;color:#fff}
.ozc-navbtn.is-active i{color:rgba(255,255,255,.78)}

.ozc-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ozc-scroll:focus{outline:none}

.ozc-secTtl{display:flex;align-items:baseline;font-weight:800;border-bottom:2px solid #0066a1;
	position:sticky;top:0;background:#fff;z-index:2}
.ozc-secTtl .en{color:#0066a1;font-weight:700;letter-spacing:.14em}
.ozc-secTtl i{font-style:normal;color:#5a6b80;letter-spacing:.06em;margin-left:auto}

.ozc-list{position:relative;list-style:none;margin:0;padding:0}
.ozc-item{position:relative;border-bottom:1px solid #eef1f6}
.ozc-item:last-child{border-bottom:0}
.ozc-year b{display:block;font-weight:700;line-height:1;letter-spacing:-.02em;color:#0f2a44}
.ozc-year i{display:block;font-style:normal;color:#5a6b80}
.ozc-ev{display:grid;align-items:baseline}
.ozc-mon{color:#0066a1;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.ozc-ev p{font-weight:500;color:#333}
.ozc-note{color:#5a6b80;line-height:1.8}

.ozc-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#eef1f6}
.ozc-prog span{display:block;height:100%;width:0;background:#0066a1;transition:width .15s linear}

/* JSが動作している時だけフェードイン初期状態を適用 */
.ozc-js .ozc-item{opacity:0;transform:translateY(24px);
	transition:opacity .8s var(--easing),transform .9s var(--easing)}
.ozc-js .ozc-item.in{opacity:1;transform:none}

/*PC*/
@media print, screen and (min-width: 768px) {
#about .block.ozc .ozc-lead .ozc-leadTxt{margin:0 0 46px}
#about .ozc .ozc-open{padding:20px 20px 20px 44px}
#about .ozc .ozc-openIn .en{font-size:.8rem}
#about .ozc .ozc-openJa{font-size:1.15rem}

.ozc-modal{padding:40px 24px}
.ozc-dialog{width:100%;max-width:1080px;height:88vh;max-height:920px;border-radius:.6rem}
.ozc-head{padding:24px 44px}
.ozc-mttl{font-size:1.7rem}
.ozc-mttl .en{font-size:.8rem;margin:0 0 8px}
.ozc-close{width:48px;height:48px}
.ozc-close span{width:19px;margin-left:-9.5px}
.ozc-nav{padding:16px 44px}
.ozc-navbtn{padding:9px 20px}
.ozc-navbtn b{font-size:.95rem}
.ozc-navbtn i{font-size:.68rem;margin-top:2px}
.ozc-inner{padding:0 44px 70px}
.ozc-sec{padding:44px 0 0}
.ozc-secTtl{font-size:1.9rem;gap:16px;padding:18px 0 14px;margin:0 0 6px}
.ozc-secTtl .en{font-size:.75rem}
.ozc-secTtl i{font-size:.85rem}
.ozc-list::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1px;background:#dbe2ec}
.ozc-item{display:grid;grid-template-columns:200px 1fr;column-gap:44px;padding:30px 0}
.ozc-year{position:relative;padding-left:26px}
.ozc-year::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;
	background:#fff;border:2px solid #0066a1;box-shadow:0 0 0 5px #fff}
.ozc-year b{font-size:2.3rem}
.ozc-year i{font-size:.82rem;margin-top:10px}
.ozc-ev{grid-template-columns:58px 1fr;column-gap:18px;padding:0 0 16px}
.ozc-ev:last-child{padding-bottom:0}
.ozc-mon{font-size:.85rem}
.ozc-ev p{font-size:.95rem;line-height:1.95}
.ozc-note{margin:46px 0 0;font-size:.8rem}
}

/*sp*/
@media only screen and (max-width: 767px) {
#about .block.ozc .ozc-lead .ozc-leadTxt{margin:0 0 30px}
#about .ozc .ozc-open{padding:14px 14px 14px 28px;gap:14px}
#about .ozc .ozc-openIn .en{font-size:.7rem}
#about .ozc .ozc-openJa{font-size:1rem}
#about .ozc .ozc-openArw{width:32px;height:32px}
#about .ozc .ozc-openArw::before{left:9px;width:13px}
#about .ozc .ozc-openArw::after{right:9px;width:7px}

.ozc-modal{padding:0}
.ozc-dialog{width:100%;height:100%;max-height:none;border-radius:0}
.ozc-head{padding:14px 16px}
.ozc-mttl{font-size:1.15rem}
.ozc-mttl .en{font-size:.62rem;margin:0 0 6px}
.ozc-close{width:40px;height:40px}
.ozc-close span{width:16px;margin-left:-8px}
.ozc-nav{padding:10px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ozc-navbtn{padding:7px 14px}
.ozc-navbtn b{font-size:.85rem}
.ozc-navbtn i{font-size:.6rem;margin-top:1px;white-space:nowrap}
.ozc-inner{padding:0 16px 50px}
.ozc-sec{padding:26px 0 0}
.ozc-secTtl{font-size:1.35rem;gap:10px;padding:12px 0 10px;margin:0 0 4px;flex-wrap:wrap}
.ozc-secTtl .en{font-size:.62rem;width:100%;margin:0 0 2px}
.ozc-secTtl i{font-size:.72rem}
.ozc-list::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;background:#dbe2ec}
.ozc-item{padding:20px 0 20px 24px}
.ozc-year{position:relative;margin:0 0 12px}
.ozc-year::before{content:"";position:absolute;left:-24px;top:.35em;width:9px;height:9px;border-radius:50%;
	background:#fff;border:2px solid #0066a1;box-shadow:0 0 0 4px #fff}
.ozc-year b{font-size:1.6rem;display:inline-block;vertical-align:baseline}
.ozc-year i{font-size:.75rem;display:inline-block;margin-left:8px}
.ozc-ev{grid-template-columns:44px 1fr;column-gap:12px;padding:0 0 14px}
.ozc-ev:last-child{padding-bottom:0}
.ozc-mon{font-size:.75rem}
.ozc-ev p{font-size:.85rem;line-height:1.9}
.ozc-note{margin:32px 0 0;font-size:.72rem}
}

/* ============================================================
   ページ内アンカーナビ（FV直下・機械事業本部と同デザイン）
   .ozn = OZawa Nav
   ============================================================ */
.ozn *{box-sizing:border-box}
.ozn{background:transparent;border:0}
.ozn-inner{width:94%;margin:0 auto}
.ozn-list{display:grid;list-style:none;margin:0;padding:0}
.ozn-link{
	position:relative;display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;background:#00275f;border-radius:.4rem;
	text-decoration:none;color:#fff;text-align:center;
	transition:background .45s var(--easing),box-shadow .45s var(--easing)}
.ozn-link:hover,
.ozn-link.is-active{background:#0066a1}
.ozn-link:hover{box-shadow:0 14px 26px -16px rgba(0,39,95,.75)}
.ozn-txt{display:block;font-weight:700;line-height:1.3;letter-spacing:.04em}
.ozn-arw{position:absolute;top:50%;transform:translateY(-50%)}
.ozn-arw::before,
.ozn-arw::after{content:"";position:absolute;background:#fff}
.ozn-arw::before{top:50%;right:0;height:1px;margin-top:-.5px}
.ozn-arw::after{top:50%;right:0;width:1px;transform-origin:right center;transform:rotate(-45deg)}

/*PC*/
@media print, screen and (min-width: 768px) {
#hed{margin-bottom:0}
.ozn{padding:19px 0 18px;margin-top:0}
/* ボタンの大きさを統一（1段目4つ／2段目3つ・2段目は中央寄せ） */
.ozn-list{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.ozn-list > li{width:calc((100% - 67px) / 4)}   /* 67px = gap 22px × 3 + 微調整 */
.ozn-link{min-height:46px;padding:12px 34px}
.ozn-txt{font-size:.95rem}
.ozn-arw{right:16px;width:12px;height:12px}
.ozn-arw::before{width:12px}
.ozn-arw::after{height:6px;margin-top:-6px}
}

/* PCでも幅が狭い場合はボタン内の余白と文字を詰めて折り返しを防ぐ */
@media print, screen and (min-width: 768px) and (max-width: 1199px) {
.ozn-list{gap:12px}
.ozn-list > li{width:calc((100% - 37px) / 4)}   /* 37px = gap 12px × 3 + 微調整 */
.ozn-link{padding:12px 26px 12px 14px}
.ozn-txt{font-size:.8rem;letter-spacing:.02em}
.ozn-arw{right:10px;width:10px;height:10px}
.ozn-arw::before{width:10px}
.ozn-arw::after{height:5px;margin-top:-5px}
}

/*sp*/
@media only screen and (max-width: 767px) {
#hed{margin-bottom:0}
.ozn{padding:12px 0;margin-top:0}
.ozn-inner{width:100%;padding:0 15px}
.ozn-list{grid-template-columns:repeat(2,1fr);gap:8px}
.ozn-link{min-height:44px;padding:10px 24px 10px 10px}
.ozn-txt{font-size:.68rem;letter-spacing:.02em}
.ozn-arw{right:10px;width:9px;height:9px}
.ozn-arw::before{width:9px}
.ozn-arw::after{height:5px;margin-top:-5px}
}

/* ============================================================
   ページ内ナビ連動：選択したコンテンツだけを表示（タブ切り替え）
   ============================================================ */
/* JSが効かない場合の保険としてのオフセット（通常はJSが実測値で調整） */
#about .ozn-panel{display:none;scroll-margin-top:130px}
@media only screen and (max-width: 767px){
	#about .ozn-panel{scroll-margin-top:80px}
}
#about .ozn-panel.is-open{
	display:block;
	animation:oznFade .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes oznFade{
	from{opacity:0;transform:translateY(14px)}
	to{opacity:1;transform:none}}

/* 選択中のタブを強調 */
.ozn-link.is-active{background:#0066a1;box-shadow:0 14px 26px -16px rgba(0,39,95,.75)}

/* 動きを減らす設定の環境ではアニメーションを無効化 */
@media (prefers-reduced-motion: reduce){
	#about .ozn-panel.is-open{animation:none}
}