/* リセットcss */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,main { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
main{box-shadow:0 0 0;}
*{box-sizing:border-box;}
a{text-decoration:none;color:#000000;}
li{list-style:none;}
body{background:#FFFFFF;width:100%;height:auto;font-family:serif;}
/* font-family: "myfont",'Noto Serif JP', serif; */
.Michroma{font-family: "Michroma", sans-serif;}
.rel{position:relative;}
.ab{position:absolute;}
.max{max-width:1300px;margin:0 auto;}
.bold{font-weight:bold;}
.fl{display:flex;}

p,summary,a{font-size:15px;letter-spacing:.1rem;font-weight:normal;line-height:1.5rem;}
h1{font-size:24px;letter-spacing:.1rem;font-weight:normal;}
h2{font-size:22px;letter-spacing:.1rem;font-weight:normal;}
h3{font-size:18px;letter-spacing:.1rem;font-weight:normal;}
h4,h5,h6{font-size:15px;letter-spacing:.1rem;font-weight:normal;}

@media screen and (max-width:950px){
  h1{font-size:21px;}
  h2{font-size:19px;}
  h3{font-size:16px;}
  h4,h5,h6{font-size:14px;}
  p,summary,a{font-size:14px;}
}
@media screen and (max-width:500px){
  h1{font-size:18px;}
  h2{font-size:16px;}
  h3{font-size:15px;}
  h4,h5,h6{font-size:13px;}
  p,summary,a{font-size:13px;}
}

/*------ ホバーアンダーライン ------*/
.a-hov{position:relative;}
.a-hov::after{position:absolute;left:0;content:'';width:100%;height:1px;background:#fff;bottom:-3px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.4s;}
.a-hov:hover::after{transform:scale(1, 1);}

/* ロードフェードイン */
.js-box{display:none;}
/* ロードフェードイン(下から) */
.js-box-under{opacity:0;visibility:hidden;transform:translateY(50px);transition:opacity 3s,visibility 3s, transform 3s;}
.js-box-under.load{opacity:1;visibility:visible;transform:translateY(0px);}
/* フェードイン */
.block{opacity:0;transition:all 2s;}
.fadeIn{opacity:1;}

/*-------------------- top ----------------------*/
/*------ アイコン関係 ------*/
.top{width:100%;height:100vh;overflow:hidden;}
.logo{top:24px;left:36px;}
.logo img{width:200px;}
.top-sns{width:30px;}
.top-sns:hover{opacity:.7;}
.yo{top:160px;left:36px;}
.fa{top:220px;left:36px;}
.in{top:280px;left:36px;}
.scrolldown1{position:absolute;left:4%;bottom:150px;height:50px;z-index:5;transform:translate(-50%,-50%);}
.scrolldown1::before{content:"";position:absolute;left:0%;top:0%;width:.5px;background:#8d8d8d;animation:pathmove 2s ease-in-out infinite;opacity:0;}
@keyframes pathmove{
  0%{height:0;top:0;opacity:0;}
  20%{height:130px;opacity:1;}
  100%{height:0;top:190px;opacity:0;}
}
@media screen and (max-width:1200px){
  .logo img{width:160px;}
}
@media screen and (max-width:950px){
  .logo{top:10px;left:25px;}
  .logo img{width:130px;}
  .yo{left:30px;}
  .fa{left:30px;}
  .in{left:30px;}
}
@media screen and (max-width:800px){
  .logo img{width:110px;}
}
@media screen and (max-width:700px){
  .logo{left:15px;}
  .yo{top:130px;left:15px;}
  .fa{top:190px;left:15px;}
  .in{top:250px;left:15px;}
}
@media screen and (max-width:500px){
  .top{height:80vh;}
  .top-sns{width:25px;}
  .yo{top:130px;}
  .fa{top:180px;}
  .in{top:230px;}
  .scrolldown1{left:27px;}
}
@media screen and (max-width:430px){
  .top{height:70vh;}
  .logo img{width:90px;}
}

/*------ 背景 ------*/
.slant-bg{position:relative;width:30%;height:100%;background-color:rgba(0, 0, 0, 0.6);clip-path:polygon(0 0,85% 0,100% 100%, 60px 100%);top:0;left:21%;z-index:-5;}
/* 全体のコンテナ設定 */
.swiper-container{position: relative;overflow: hidden;}
/* 画像のスタイル */
.swiper-slide img{width:100%;height:100%;object-fit:cover;filter:brightness(0.8);}
.slant-bg::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.2);z-index:9;}
.slant-bg2{width:54%;height:100%;background-color:#C31A1A;clip-path:polygon(0 0,100% 0,100% 100%, 60px 100%);top:0;right:0;z-index:-1;}
.top-back-font{font-size:150px;color:#fff;opacity:.1;right:0;z-index:0;}
.top-back-font-top{top:4%;}
.top-back-font-bot{top:32%;}
.top-main-font{font-size:50px;color:#fff;right:2%;font-weight:bold;z-index:0;}
.top-main-font-top{top:22%;}
.top-main-font-bot{top:36%;}
.top-car{bottom:-7%;width:102%;left:8%;}
.top-menu{top:25px;right:2%;z-index:1;}
.top-menu a{margin:0 20px;color:#fff;font-weight:bold;margin-bottom:5px;font-weight:bold;}
.top-menu a:hover{opacity:.8;}
@media screen and (max-width:1300px){
  .top-main-font{font-size:40px;}
  .top-main-font-top{top:26%;}
  .top-car{width:95%;left:12%;}
}
@media screen and (max-width:1200px){
  .slant-bg{width:35%;}
}
@media screen and (max-width:1100px){
  .top-main-font{font-size:35px;}
  .top-car{bottom:-5%;}
  .top-menu a{margin:0 10px;}
}
@media screen and (max-width:950px){
  .top-back-font-all{display:block;}
  .top-back-font-top,.top-back-font-bot{display:none;}
  .top-back-font{font-size:70px;color:#bfbfbf;writing-mode:vertical-lr;bottom:0;left:-27px;font-weight:bold;z-index:-1;opacity:.2;letter-spacing:0;}
  .top-main-font{font-size:28px;writing-mode:vertical-rl;z-index:9;}
  .top-main-font-top{top:15%;right:5%;}
  .top-main-font-bot{top:20%;right:12%;}
  .top-menu{top:15px;right:10%;}
  .top-menu a{margin:3px 30px;}
  .top-menu-none{display:none;}
  .top-car{bottom:-40px;left:9%;}
  .slant-bg{width:47%;}
  .slant-bg2{width:40%;}
}
@media screen and (max-width:750px){
  .slant-bg{width:49%;clip-path:polygon(0 0,80% 0,100% 100%, 60px 100%);}
}
@media screen and (max-width:700px){
  .top-main-font{font-size:21px;}
  .top-car{bottom:-31px;}
  .slant-bg{width:53%;left:25%;}
  .slant-bg2{width:37%;}
}
@media screen and (max-width:500px){
  .top-menu{right:15%;}
  .top-back-font{font-size:50px;left:-5px;}
  .top-main-font-bot{top:18%;right:14%;}
  .top-car{bottom:-19px;}
  .slant-bg{width:80%;left:0%;clip-path:polygon(0 0,80% 0,100% 100%, 0px 100%);}
}
@media screen and (max-width:430px){
  .top-back-font{font-size:40px;}
  .top-main-font{font-size:19px;}
  .top-car{bottom:-17px;width:120%;left:20%;}
  .slant-bg2{width:42%;clip-path:polygon(0 0,100% 0,100% 100%,70px 100%);}
}

/* ハンバーガー */
.hum{position:relative;z-index:9999;display:none;}
@media screen and (max-width:950px){
  .hum{display:block;}
  .header{display:none;}
}

/* Hamburger menu */
.nav-trigger{position:fixed;z-index:4;top:1.1rem;right:30px;width:44px;height:44px;overflow:hidden;color:transparent;white-space:nowrap;text-indent:100%;}
.nav-trigger span{position:relative;}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after{position:absolute;width:40px;height:1.5px;background:#cccccc;z-index:999;}
.nav-trigger span{top:calc(50% - 2px);left:calc(50% - 18px);transition:background .3s;}
.nav-trigger span::before,
.nav-trigger span::after{content:'';top:0;left:0;transition:background .3s, transform .3s;}
.nav-trigger span::before{transform:translateY(-12px);}
.nav-trigger span::after{transform:translateY(12px);}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after{background-color:rgb(255, 255, 255)}
.nav-open .nav-trigger span{background:transparent;}
.nav-open .nav-trigger span::before{transform:rotate(-45deg);top:0;}
.nav-open .nav-trigger span::after{transform:rotate(45deg);top:0;}
/* ナビ内 */
/* ナビ表示幅 */

.nav-container{position:fixed;z-index:3;width:40%;top:0;right:0;overflow:hidden;transform:translateZ(0);transform:translateX(100%);}
.nav-open .nav-container{transform:translateX(0);}
.nav-all{overflow:auto;height:100vh;background:linear-gradient(to right,rgba(228, 35, 35, 1),rgba(131, 15, 15, 1));}
.nav{padding:0;color:#fff;padding:17% 0 20%;}
.nav li{position:relative;border-bottom:1px solid #fff;}
.nav a{display:flex;font-weight:bold;justify-content:space-between;align-items:baseline;padding:2.3rem 0 .8rem 6%;color:#f6f8f8;transform:translateZ(0);width:95%;letter-spacing:.2rem;}
.nav a:hover{transition:all .1s;opacity:.6;}
.nav a h1{letter-spacing:.1rem;font-size:21px;opacity:.6;}
.nav-opa{opacity:.4;display:block;position:relative;}
.nav-opa::after{background-color:#fff;top:50%;left:30%;content:'';display:block;height:1px;position:absolute;width:30%;}
.nav-under{width:100%;position:absolute;bottom:0;left:0;display:flex;justify-content:left;flex-wrap:wrap;background:linear-gradient(to right,rgba(255, 255, 255, 1),rgba(132, 132, 132, 1));}
.nav-under li{padding:1rem 0 .5rem 6%;width:60px;}
.nav-under li a{display:inline-block;color:#fff;}
.nav-under li a:hover{transition:all .1s;opacity:.8;}
.nav-under li img{width:100%;}
.nav-open .nav-all{animation:slide-links .5s .2s backwards;}
@keyframes slide-links{
  0%{opacity:0;transform:translateX(100%);}
  100%{opacity:1;transform:translateX(0);}
}
/* .nav1{display:block;position:relative;}
.nav1::after{background-color:#fff;top:50%;left:30%;content:'';display:block;height:1px;position:absolute;transition:.5s all;width:0%;}
.nav1:hover::after{width:40%;} */

@media screen and (max-width:1100px){
  .nav-trigger a h6{width:120px;}
  .nav-trigger a h5{font-size:85%;right:72px;}
  .nav-trigger span,
  .nav-trigger span::before,
  .nav-trigger span::after{width:36px;}
  .nav-trigger span::before{top:2px;}
  .nav-trigger span::after{top:-2px;}
}
@media screen and (max-width:950px){
  .nav-container{width:50%;}
  .nav-trigger{top:.5rem;right:20px;}
  .nav-trigger a h6{width:100px;height:4.5rem;}
  .nav-trigger a h5{top:3rem;right:61px;}
  .nav a h1{position:absolute;top:7px;}
  .nav1 p{width:95%;text-align:right;}
}
@media screen and (max-width:900px){
  .nav-trigger a h5{top:2.7rem;right:63px;}
}
@media screen and (max-width:800px){
  .nav-container{width:50%;}
  .nav-img3 a{width:15%;margin:4% 2%;}
  .nav a h1{font-size:18px;}
  .nav a p{font-size:13px;}
  .nav-under li{width:50px;}
}
@media screen and (max-width:700px){
  .nav-container{width:60%;}
  .nav a{padding:1rem 0 .8rem 0%;}
  .nav-container{width:60%;}
  .nav li{padding:.5rem 0 0 6%;}
  .nav-trigger a h5{right:62px;}
  .nav a h1{opacity:.3;font-size:16px;}
  .nav a p{font-size:17px;}
}
@media screen and (max-width:600px){
  .nav{padding:25% 0 20%;}
  .nav a{display:block;}
  .nav a p{text-align:right;}
}
@media screen and (max-width:500px){
  .nav-container{width:100%;}
  .nav{padding:20% 0 20%;}
  .nav-trigger{right:16px;}
  .nav-trigger a h6{width:90px;height:4rem;}
  .nav-trigger a h5{top:2.6rem;right:57px;}
  .nav li{padding:1rem 0 0 0%;}
  .nav1::after{left:45%;}
  .nav a h1{font-size:17px;left:6%;top:-7px;}
  .nav-under li{width:60px;}
}
@media screen and (max-width:430px){
  .nav-under li{width:55px;}
}

/* 子メニューの基本スタイル */
.nav-child {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; /* スムーズに開閉 */
    background: rgba(0, 0, 0, 0.1); /* 少し暗くして階層を表現 */
    list-style: none;
    padding: 0;
}

/* 開いた時の状態 */
.nav-child.is-open {
    max-height: 500px; /* 十分な高さを指定 */
}

/* 子メニュー内のリンク */
.nav-child li {
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.nav-child li a {
    padding: 1rem 0 1rem 12% !important; /* 親より深くインデント */
    font-size: 14px !important;
    display: block !important;
}

/* 矢印アイコンなどの演出（任意） */
.has-child:after {
    content: '▼';
    font-size: 18px;
    margin-left: 10px;
    transition: transform .3s;
    opacity: .6;
    left: 2%;
    bottom: 4px;
    position: absolute;
}
.nav-open-sub .has-child::after {
    transform: rotate(180deg);
}
@media screen and (max-width:500px){
  .has-child:after{bottom:12px;}
}

/* 求人 */
.top-recruit-security {
    background-image: 
        linear-gradient(45deg, rgba(17, 17, 17, 0.8) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(17, 17, 17, 0.8) 25%, transparent 25%),
        url(./img/本社工場外観3.jpg);
    background-size: 4px 4px, 4px 4px, cover;
    background-position: center;
    background-repeat: repeat, repeat, no-repeat;
    padding: 80px 20px;
    color: #fff;
    text-align: center;
    background-blend-mode: multiply; 
    background-color:#6b6b6b;
	background-position:right;
}

.top-recruit-in-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* タイトル：人材募集 */
.top-recruit-in-inner h2 {
    font-size:26px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    position: relative;
    display: inline-block;
}

/* タイトルの下の装飾線 */
.top-recruit-in-inner h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #c00; /* 戸田レッド */
}

/* メッセージ部分 */
.top-recruit-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* 「人生は一度〜」の強調 */
.top-recruit-content p span {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    color: #eee;
    text-align: left;
    display: inline-block; /* 左寄せの線を中央付近に置くため */
}

/* 詳細はこちらボタン */
.a-hov-rec {
    display: inline-block;
    padding: 10px 40px;
    background: linear-gradient(to bottom, #d00 0%, #800 100%);
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ボタンのホバーエフェクト */
.a-hov-rec:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ボタン内の矢印的な装飾（画像イメージ再現） */
.a-hov-rec::after {
    content: ">";
    margin-left: 15px;
    font-family: serif;
    transition: transform 0.3s;
}
.a-hov-rec:hover::after {
    transform: translateX(5px);
}

@media screen and (max-width:950px){
	.top-recruit-security{padding:40px 20px;}
}
@media screen and (max-width:700px){
	.top-recruit-in-inner h1{font-size:20px;}
	.top-recruit-content p{font-size:14px;}
	.top-recruit-content p span{font-size:16px;}
	.a-hov-rec{padding:10px 40px;}
}
@media screen and (max-width:500px){
	.top-recruit-in-inner h1{font-size:18px;}
	.top-recruit-content p{font-size:13px;text-align:left;}
	.top-recruit-content p span{font-size:14px;}
	.a-hov-rec{padding:6px 35px;}
}

/*---------------------- TODAレーシングについて、3紹介コンテンツ ----------------------*/
.about{width:100%;height:auto;background-image:url(./img/top-back.png);background-size:cover;padding:5% 0;overflow:hidden;}
.about::after{content:'';width:100%;height:100%;background-color:rgba(162, 19, 19, 0.6);top:0;left:0;position:absolute;z-index:-2;}
.about-inner-box{width:70%;margin:1% auto;}
.about-inner-box h2,.about-inner-box h1{color:#ffffff;font-weight:bold;position:relative;z-index:9;}
.about-inner-box h1{margin:1% 4%;}
.about-inner-box h1::after{position:absolute;content:'';width:60px;height:.5px;background-color:#ffffff;top:50%;left:25%;}
.about-inner-box h3{color:#ffffff;margin:2% 4% 0;position:relative;z-index:9;}
.about-inner-box h6{color:rgb(205, 205, 205);margin:2% 5% 0;position:relative;z-index:9;}
.about-inner-box p{color:rgb(205, 205, 205);margin:1% 0;z-index:10;}
.about-box-left{display:flex;justify-content:space-between;flex-wrap:wrap;}
.about-box-left-top,.about-box-left-bot-right,.about-box-left-bot-left{width:33%;margin:5px 0;padding:1rem 1rem 3rem;}
.about-box-left-bot-right,.about-box-left-bot-left{background-size:cover;background-repeat:no-repeat;}
.about-box-motor,.about-box-service,.about-box-test{position:relative;z-index:9;text-align:left;margin:10% auto;}
.about-box-motor a,.about-box-service a,.about-box-test a{display:table;color:#fff;font-weight:bold;margin:1% 0;font-size:18px;line-height:1.8rem;}
.about-box-view{position:absolute;z-index:9;text-align:center;width:100%;bottom:1.5rem;left:0;}
.about-box-view a{display:inline-block;color:#fff;font-weight:bold;}
.about-box-left-top:hover span,.about-box-left-bot-left:hover span,.about-box-left-bot-right:hover span{background-color:rgb(195 26 26 / 83%);}
.about-box-right span,.about-box-left-top span,.about-box-left-bot-right span,.about-box-left-bot-left span{background-size:cover;background-repeat:no-repeat;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:rgba(87, 87, 87, 0.8);}
.about-box-right{width:100%;height:330px;background-image:url(./img/本社工場外観3.jpg);background-size:cover;padding-top:1%;}
.about-box-right span{background-color:rgba(87, 87, 87, 0.8);}
.about-title{margin:2% 0 0 5%;}
.about-box-left-top{background-image:url(./img/TR-F301_F3_9561-04_outline_130x98_300.jpg);background-size:cover;background-position:center;}
.about-box-left-bot-right{background-image:url(./img/モータリングベルト耐久試験機.jpg);background-size:cover;background-position:center;}
.about-box-left-bot-left{background-image:url(./img/TODA_FX_completed_cylinder_head_2009_06_09_15_modify_150x100_400.jpg);background-size:cover;background-position:center;}

.about-box-right a{position:absolute;bottom:22px;right:20px;display:inline-block;padding:6px 28px 8px;background-color:#C31A1A;z-index:9;}

.about-box-right a:hover{background-color:#620c0c;z-index:9;}
.co-link{font-size:13px;z-index:5;z-index:9;margin:1px 0 0;}

.about-design{content:'';background-color:#d7d7d7;}
.about-design-ver{width:.2px;height:50px;}
.about-design-hor{width:50px;height:.2px;}
.about-design1{top:40px;left:165px;}
.about-design2{top:55px;left:150px;}
.about-design3{bottom:40px;right:165px;}
.about-design4{bottom:55px;right:150px;}

@media screen and (max-width:1200px){
  .about-inner-box{width:75%;}
  .about-inner-box h2::after{left:30%;}
  .about-inner-box h3{font-size:15px;}
  .about-design1{left:100px;}
  .about-design2{left:85px;}
  .about-design3{right:100px;}
  .about-design4{right:85px;}
  .about-box-motor a,.about-box-service a,.about-box-test a{font-size:15px;}
  .about-box-view a{font-size:13px;}
}

@media screen and (max-width:1150px){
  .about-inner-box p{font-size:13px;}
}
@media screen and (max-width:1050px){
  .about-inner-box p{font-size:12px;}
}
@media screen and (max-width:1000px){
  .about-inner-box h1::after{left:35%;}
}
@media screen and (max-width:950px){
  .about-inner-box{width:90%;}
  .about-design1{top:20px;left:20px;}
  .about-design2{top:35px;left:5px;}
  .about-design3{bottom:20px;right:20px;}
  .about-design4{bottom:35px;right:5px;}
	.about-box-right{height:300px;}
}
@media screen and (max-width:800px){
  .about-inner-box h1::after{left:40%;}
  .about-inner-box h3{font-size:14px;}
  .about-box-motor a, .about-box-service a, .about-box-test a{font-size:13px;}
  .about-inner-box p{font-size:10px;}
  .co-link{font-size:12px;}
}
@media screen and (max-width:700px){
  .about-inner-box{width:80%;margin:5% auto;display:block;}
  .about-box-left-top{width:100%;margin:5px auto;}
  .about-box-left-top, .about-box-left-bot-right, .about-box-left-bot-left{width:100%;margin:0 auto 5px;}
  .about-inner-box h1,.about-box-left-top h2, .about-box-left-bot-right h2, .about-box-left-bot-left h2{font-size:23px;}
  .about-box-motor a, .about-box-service a, .about-box-test a{font-size:20px;margin:2% 0;}
  .about-inner-box p{font-size:18px;}
  .about-inner-box h1{margin:0 4%;padding:2% 0;}
  .about-inner-box h6{padding:0;}
  .about-inner-box h1::after{width:40%;left:25%;}
  .about-box-right{height:330px;}
  .about-box-view a{font-size:16px;}
}
@media screen and (max-width:500px){
  .about-inner-box{width:90%;margin:7% auto;}
  .about-design1{left:10px;}
  .about-design2{left:0px;}
  .about-design3{right:10px;}
  .about-design4{right:0px;}
  .about-box-right{height:360px;}
  .about-inner-box h1{margin:0 4%;}
  .about-inner-box h1::after{left:35%;}
  .about-inner-box h3{font-size:13px;margin:5% 4% 0;}
  .about-box-motor a, .about-box-service a, .about-box-test a{font-size:16px;margin:3% 0;}
  .about-box-view a{font-size:14px;border-bottom:1px solid #fff;}

}

/*---------------------- ニュース ----------------------*/

.news{background-image:url(./img/news-back.png);background-repeat:no-repeat;background-size:cover;width:100%;padding:2% 0;}
.ttl-box{margin-left:20px;}
.contact-ttl,.ser-ttl,.news-ttl{font-weight:bold;letter-spacing:5px;color:#4A4A4A;margin-bottom:150px;}
.news-box{margin:2% auto 2%;background-color:#E3E3E3;padding:4% 4% 3%;width:80%;}
.news-inner-box ul{width:65%;margin:0 auto;}
.news li{margin:0 0 0 20px;background:none;padding:4% 0;}
.da-ca-flex{display:flex;}

.card-meta {
    display:flex;
    gap: 20px; /* 要素同士の隙間 */
	position:relative;z-index:9;
}
.card-meta a{width:auto;background:none;}

/* 日付 */
.date {
    font-size: 15px;
    color: #666;
    min-width: 90px;
    font-family: serif;
}

/* リンクの設定（タイトルのみ） */
.card-link {
    text-decoration: none; /* 下線を消す */
    color: #333;           /* 文字色 */
    transition: 0.3s;
}

.card-link:hover {
    color: #ff1a1a;       /* ホバー時に赤色にする（お好みで） */
    text-decoration: underline; /* ホバー時のみ下線を出す */
}

.card-title {
    margin: 0;
    font-size: 15px;
    font-weight: normal;
    flex-grow: 1;
}
.news-a-box{background-color:#C31A1A;padding:5px 50px 5px 15px;color:#ffffff;}

.news-a-box::before{content:'';width:15px;height:4px;top:50%;right:0;background-color:#E3E3E3;position:absolute;transform:translate(0,-50%);}
.news-a-box::after{position:absolute;content:'';width:10px;height:10px;top:50%;right:10px;transform:translate(0,-50%);border-radius:50%;background-color:#E3E3E3;}
.news-a-box:hover{background-color:#515151;}
.back-font{font-size:150px;z-index:5;opacity:.03;font-weight:bold;color:#606060;bottom:0;right:0;line-height:150px;}

.news-a-box-phone{display:none;}

.card-text{font-size:13px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tab-btn{cursor:pointer;transition:all 0.3s;outline:none;border:1px solid #eee;background:#fff;padding:10px 40px;width:30%;margin:0 3%;}
.tab-btn:hover{transition:all .1s;border:1px solid #ff1a1a;}
/* 選択されている時のスタイル */
.tab-btn.active{background-color:#ff1a1a;color:#fff;border-color:#ff1a1a;}
/* 共通スタイル */
.category{padding:3px 0 0;border-radius:2px;color:#fff;display:inline-block;width:90px;text-align:center;font-size:11px;height:24px;}
/* グレー（お知らせなど） */
.badge-gray{background:#676767;}
/* 赤（新製品など） */
.badge-red{background:#d32f2f;}


@media screen and (max-width:1100px){
  .ttl-box{width:30%;}
  .news-inner-box ul{width:80%;}
  .news-a-box{font-size:12px;}
}
@media screen and (max-width:950px){
  .news-box{width:90%;}
  .ttl-box{margin-left:0;}
  .news li{margin:5px 0 5px 30px;}
  .news-a-box{font-size:10px;}
}
@media screen and (max-width:800px){
  .news-inner-box{display:block;}
  .ttl-box{width:100%;}
  .news-ttl{margin-bottom:0;}
  .news-inner-box ul{margin:5% auto 3%;width:100%;}
  .news li{width:100%;}
  .news-a-box-pc{display:none;}
  .news-a-box-phone-class{text-align:right;}
  .news-a-box-phone{display:inline-block;z-index:99;}
}
@media screen and (max-width:700px){
  .news li{margin:5px 0 5px 0px;}
  .back-font{font-size:130px;}
}
@media screen and (max-width:600px){
	
}
@media screen and (max-width:500px){
  .news li a{margin: 5px 0 0 10px;}
  .news-inner-box ul{margin:5% auto;}
  .news-a-box{padding:3px 50px 2px 15px;}
  .back-font{font-size:90px;}
  .card-meta{display:block;}
  .card-title{margin:2% auto;}
}


/*---------------------- 製品・サービス ----------------------*/
.servise{width:100%;}
.ser-ttl{margin:5% 0 2% 7%;}
.ser-ttl::after{position:absolute;content:'';bottom:-10%;left:-100%;width:180%;height:15%;background-color:#C31A1A;z-index:-5;}
.se-back-font{font-size:150px;z-index:-2;opacity:.03;font-weight:bold;color:#606060;line-height:150px;}
.se-back-font-top{top:-50px;left:0;}
.se-back-font-bot{bottom:-50px;left:0;}

.ser-box{width:94%;margin:2% auto;height:auto;}
.ser-box-left{margin:3% 0 0 4%;padding-bottom:6%;}
.ser-box-left h2{font-weight:bold;margin:5px 0;}
.ser-box-left h2 span{font-weight:normal;font-size:16px;margin-left:5px;}
.ser-box-left p{line-height:30px;}

.ser-box-right{margin-top:-5%;}

.ser-inner-box{width:270px;height:280;clip-path:polygon(15% 0, 100% 0, 85% 100%, 0 100%);}

.ser-in-inner-box{width:100%;height:100%;background-color:rgba(74, 74, 74, 0.7);text-align:center;padding-top:100px;}
.ser-in-inner-box:hover{background-color:rgba(195, 26, 26, 0.95);}
.ser-in-inner-box h2{font-size:18px;font-weight:bold;color:#FFFFFF;width:100%;}
.ser-in-inner-box p{font-size:12px;color:#D3D3D3;width:100%;}

.ser-in-inner-box span{background-image:url(./img/top-mortor.jpg);background-size:cover;background-position:center;width:100%;height:100%;z-index:-5;top:0;left:0;right:0;bottom:0;}

@media screen and (max-width:1200px){
  .ser-inner-box{width:250px;}
  .ser-in-inner-box{height:90%;padding-top:90px;}
}
@media screen and (max-width:1100px){
  .ser-ttl{margin:5% 0 2% 4%;}
  .ser-box-left{margin:3% 0 0 1%;}
  .ser-inner-box{width:230px;}
  .ser-in-inner-box{height:80%;padding-top:80px;}
}
@media screen and (max-width:1000px){
  .ser-box-left h2{font-size:19px;}
  .ser-inner-box{width:220px;}
}
@media screen and (max-width:950px){
  .servise{overflow:hidden;}
  .ser-ttl::after{height:10%;}
  .se-back-font{font-size:110px;}
  .se-back-font-top{top:0px;}
  .se-back-font-bot{bottom:0px;}
  .ser-box{display:block;}
  .ser-box-left{margin:3% auto;width:80%;padding-bottom:0;}
  .ser-box-right{margin-top:0%;justify-content:center;}
  .ser-in-inner-box{padding:70px 0;height:100%;}
}
@media screen and (max-width:800px){
  .ser-box-left{width:95%;}
  .ser-inner-box{width:200px;}
  .ser-in-inner-box{padding:60px 0;}
}
@media screen and (max-width:700px){
  .se-back-font{font-size:90px;}
  .ser-ttl::after{height:2px;}
  .ser-in-inner-box p{font-size:10px;}
  .ser-in-inner-box h2{font-size:15px;}
  .ser-box-left h2{font-size:17px;}
  .ser-box-left p{line-height:23px;}
}
@media screen and (max-width:600px){
  .ser-box-left{margin:7% auto;}
  .ser-in-inner-box{padding:50px 0;}
}
@media screen and (max-width:500px){
  .servise{padding:5% 0 0;}
  .se-back-font{font-size:70px;top:50px;}
  .se-back-font-top{top:-30px;}
  .ser-box-left h2{font-size:15px;}
  .ser-box-right{justify-content:left;flex-wrap:wrap;}
  .ser-inner-box{width:100%;margin:1% auto;clip-path:none;}
}

/*---------------------- コンタクト ----------------------*/
.top-contact{width:100%;margin:0 auto 0;padding:9% 0;overflow:hidden;background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4)), linear-gradient(-45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4)),linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(./img/Dallara320_f-2_no_name.jpg);background-size:cover;}
.top-contact-ttl{margin:0 10% 0 6%;width:16%;color:#fff;text-shadow:1px 1px 3px #000;}

.con-box-right{width:70%;}
/* .con-top,.con-bot{padding:15px;border:1px solid #ffffff;display:block;width:90%;z-index:1;}
.con-top{top:0;left:0;position:relative;}
.con-bot{top:40px;left:0;position:relative;}
.cont-top:hover{background-color:#C31A1A;border-color:#C31A1A;}
.cont-bot:hover{background-color:#C31A1A;border-color:#C31A1A;}
.con-top::before,.con-top::after,.con-bot::before,.con-bot::after{position:absolute;top:0;left:0;content:'';background-color: #C31A1A;}
.con-top::before{width:30px;height:1px;transform:translate(-1px,-1px);}
.con-top::after{width:1px;height:30px;transform:translate(-50%,0);}
.con-bot::before{width:30px;height:1px;transform:translate(-.5px,-.5px);}
.con-bot::after{width:1px;height:30px;transform:translate(-50%,0);} */
.co-back-font{font-size:150px;z-index:0;opacity:.03;font-weight:bold;color:#C31A1A;line-height:150px;top:0;left:0;}

.button-border-top,.button-border-bot{border:1px solid #eee;padding:15px;width:90%;position:relative;display:inline-block;text-decoration:none;z-index:9;background:#434343cc;color:#fff;}
.button-border-bot{top:40px;left:0;}
.button-border-top p,.button-border-bot p{position:relative;z-index:10;}
.button-border-top:hover,.button-border-bot:hover{transition:all .4s;color:#fff;}
/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
.button-border-top::after,.button-border-top::before,.button-border-top span::after,.button-border-top span::before,
.button-border-bot::after,.button-border-bot::before,.button-border-bot span::after,.button-border-bot span::before
{background-color:#C31A1A;content:'';display:block;position:absolute;z-index:10;transition:all .5s ease;-webkit-transition:all .5s ease;}
/* 左上へ配置 */
.button-border-top::after,.button-border-bot::after{width:30px;height:1px;top:-1px;left:-1px;}
/* 右下へ配置 */
.button-border-top::before,.button-border-bot::before{width:0px;height:102%;left:0px;bottom:-1px;}
/* 左下へ配置 */
.button-border-top span::after,.button-border-bot span::after{width:1px;height:30px;left:-1px;top:0px;}
/* 右上へ配置 */
.button-border-top span::before,.button-border-bot span::before{width:1px;height:0px;bottom:0px;right:-1px;}
/* hover */
.button-border-top:hover::after,.button-border-top:hover::before,
.button-border-bot:hover::after,.button-border-bot:hover::before{width:100%;width:calc(100% + 1px);}
.button-border-top:hover span::after,.button-border-top:hover span::before,
.button-border-bot:hover span::after,.button-border-bot:hover span::before{height:100%;height:calc(100% + 1px);}

@media screen and (max-width:1200px){
  .top-contact-ttl{width:100%;}
  .con-box{display:block;}
  .con-box-right{margin:3% auto 0;}
  .button-border-top,.button-border-bot{width:100%;}
}
@media screen and (max-width:1100px){
  .top-contact{background-size:contain;background-position:bottom;}
}
@media screen and (max-width:1000px){
  .con-box-right{width:75%;}
}
@media screen and (max-width:950px){
  .co-back-font{font-size:110px;}
}
@media screen and (max-width:800px){
  .top-contact{background-size:cover;background-position:right;}
  .con-box-right{width:80%;}
  .co-back-font{top:-15px;}
}
@media screen and (max-width:700px){
  .top-contact{padding:7% 0 15%;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .co-back-font{font-size:90px;}
  .con-box-right{margin:5% auto 0;}
}
@media screen and (max-width:500px){
  .con-box-right{width:90%;}
  .co-back-font{font-size:70px;top:-15px;}
}

/*---------------------- 取り扱いソフト ----------------------*/
.soft{width:100%;margin:0 auto;background-color:#C31A1A;padding:1% 0;}
.soft-ttl{font-weight:bold;letter-spacing:5px;text-align:center;color:#ffffff;margin:3%;}
.soft-back-img{width:90%;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.5;z-index:0;}

.soft-box{width:90%;margin:2% auto;}
.soft-inner-box{margin-top:3%;align-items:center;}
.soft-inner-box-left{width:25%;margin:0 0 0 5%;position:relative;z-index:4;}
.soft-inner-box h3{width:69%;margin:0 0 0 1%;color:#ffffff;z-index:1;}
.soft-inner-box img{width:200px;z-index:4;}
.soft-inner-box-left::after{width:220px;height:110%;position:absolute;content:'';top:-10px;left:-10px;background-image:url(./img/monozukuri-title3.jpg);z-index:-1;opacity:.2;background-size:cover;background-position:center;}
.soft-inner-box a:hover{transition:all .1s;opacity:.8;}

@media screen and (max-width:950px){
  .soft-inner-box{margin-top:5%;}
  .soft-inner-box-left{margin:0 auto;width:30%;}
  .soft-inner-box h3{width:60%;margin:0 auto;}
}
@media screen and (max-width:800px){
  .soft-box{margin:7% auto;}
  .soft-inner-box img{width:180px;}
  .soft-inner-box-left::after{width:200px;}
}
@media screen and (max-width:700px){
  .soft-inner-box img{width:160px;}
  .soft-inner-box-left::after{width:180px;}
  .soft-inner-box h3{width:48%;font-size:14px;}
}
@media screen and (max-width:600px){
  .soft-inner-box h3{width:40%;}
}
@media screen and (max-width:500px){
  .soft-box{width:100%;}
  .soft-inner-box{display:block;}
  .soft-inner-box-left{width:100%;}
  .soft-inner-box img{width:320px;}
  .soft-inner-box-left::after{width:340px;top:-5px;left:10px;}
  .soft-inner-box h3{width:90%;margin:8% auto 15%;}
}


/*---------------------- footer ----------------------*/
footer{width:100%;margin:0 auto;background-color:#D7D7D7;height:280px;}
footer h2{font-size:18px;font-weight:bold;}
footer li a{font-size:14px;color:#515151;}
.fo-inner{margin:0 auto;width:100%;height:280px;}
.footer-menu-list{display:none;}
.fo-ttl img{width:200px;}
.fo-ttl{top:20px;left:30px;}
.fo-ttl:hover{opacity:.8;}
.fo-sns{width:30px;}
.fo-sns:hover{opacity:.8;}
.fo-sns1,.fo-sns2,.fo-sns3{left:30px;}
.fo-sns1{top:120px;}
.fo-sns2{top:170px;}
.fo-sns3{top:220px;}
.fo-left-box{top:155px;left:90px;}
.fo-right-box{justify-content:space-between;margin-left:22%;}
.fo-right-inner-box{margin:50px 0 0 0;}
footer p{bottom:0;right:0;font-size:12px;color:#6b6b6b;}

.top-back-bb{top:0;right:0;background-color:#8f0a0a;width:100px;height:100px;text-align:right;padding:10px;clip-path:polygon(0 0,100% 0,100% 100%, 0 0);color:#fff;}
.top-back-bb:hover{box-shadow:0 4px 4px inset rgba(0, 0, 0, 0.45);}
.fo-left-box li a:hover,.fo-right-box li a:hover{opacity:.6;}

/* レスポンシブメニュー */
.footer-menu-list{width:52%;padding-bottom:5%;margin:5% 0 0 3%;}
.footer-menu-list input{display:none;}
.footer-menu-list label,.footer-menu-list .menu-item{cursor:pointer;display:block;line-height:1;position:relative;padding:10px;outline:none;}

/* 開いたときに表示される部分 */
.footer-menu-list ul{margin-bottom:1px;}
.footer-menu-list li{height:0;overflow-y:hidden;transition:padding-bottom 0.5s, padding-top 0.5s;padding-top:0;padding-bottom:0;}
/* チェックボックスがチェックされた場合、またはフォーカスされた場合に開く */
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li
{height:auto;padding:1px 0 0 10px;}
/* 開いたときの下の余白 */
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child
{margin-bottom:20px;}
/* 閉じた状態の矢印描画 */
/* .footer-menu-list label:after{content:"";display:block;width:8px;height:8px;border-top:#8f0a0a 2px solid;border-right:#8f0a0a 2px solid;transform:rotate(135deg);position:absolute;right:2%;top:0;bottom:15%;margin:auto;}   */
/* 開いた状態の矢印描画 */
/* .footer-menu-list input[type=checkbox]:checked + label:after {transform: rotate(-45deg);}
.footer-menu-list a{text-decoration:none;}
.link a{color:#515151;} */

.fo-sns11,.fo-sns22,.fo-sns33{display:none;}
.foo-menu-sns{position:absolute;bottom:8%;right:5%;display:flex;justify-content:right;}
.foo-menu-sns a{margin:0 1%;width:5%;}
.foo-menu-sns .fo-sns{width:100%;}

@media screen and (max-width:1200px){
  footer h2{font-size:16px;}
  .fo-ttl img{width:150px;}
  .fo-sns{width:25px;}
  .fo-sns1{top:130px;}
  .fo-sns2{top:170px;}
  .fo-sns3{top:210px;}
  .fo-left-box{left:75px;}
}
@media screen and (max-width:950px){
  footer{height:100%;}
  .fo-right-box{display:none;}
  .footer-menu-list{display:block;}
  .fo-ttl{position:static;display:inline-block;margin:2% 0 0 3%;}
  .fo-sns1,.fo-sns2,.fo-sns3{display:none;}
  .fo-sns11,.fo-sns22,.fo-sns33{display:block;}
  .fo-inner{height:100%;}
  .fo-left-box{display:none;}
  .fo-right-inner-box{margin:0% 2% 7% 0;}
/*   .fo-right-box{justify-content:left;flex-wrap:wrap;margin-left:33%;padding-top:13%;} */
}
@media screen and (max-width:700px){
/*   .fo-left-box li{margin:0 1%;} */
/*   .fo-right-box{width:90%;margin:0 auto;justify-content:space-between;} */
}
@media screen and (max-width:600px){
  .fo-left-box{flex-wrap:wrap;}
  .fo-left-box li{width:32%;}
  .fo-right-box{padding-top:17%;}
  footer li a{font-size:13px;}
}
@media screen and (max-width:500px){
  .fo-ttl img{width:120px;}
  .fo-left-box li{width:37%;}
  .fo-right-box{padding-top:20%;}
  .footer-menu-list{width:57%;}
  .footer-menu-list label,.footer-menu-list .menu-item{font-size:13px;}
  .foo-menu-sns a{width:8%;}
}
@media screen and (max-width:430px){
  .fo-ttl{margin:5% 0 0 3%;}
  .fo-left-box li{width:42%;}
  .fo-right-box{padding-top:30%;}
  .footer-menu-list{padding-bottom:10%;width:70%;}
  footer p{font-size:10px;}	
}



/* RECRUIT */
.rec-ta{width:100%;margin:0 auto 3%;border-collapse: collapse;border:solid 1px #333;}
.rec-ta tr,.rec-ta td{border: dashed 1px #777;}

.camshaft-box {
  width: 100%;
  margin: 0 auto;
}

.cam-main-box {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}

.cam-main-box-top {
  margin: 3% auto;
  width: 100%;
}

.cam-main-box-top img {
  width: 80%;
  margin: 0 10%;
}

.cam-main-box-mid {
  width: 100%;
  margin: 0 auto;
}

.cam-main-box-mid h2 {
  font-weight: bold;
  background-image: linear-gradient(90deg, #3f3f3f, #6e737b);
  width: 100%;
  margin: 0 auto 2%;
  font-size: 24px;
  color: #fff;
  padding: 1% 0 1% 1.5%;
}

.cam-main-sec {
  width: 100%;
  margin: 3% auto;
}

.cam-main-sec h2 {
  font-weight: bold;
  background-image: linear-gradient(90deg, #3f3f3f, #6e737b);
  width: 100%;
  margin: 0 auto 2%;
  font-size: 24px;
  color: #fff;
  padding: 1% 0 1% 1.5%;
}

.cam-main-sec-box h3 {
  background-color: #a20606;
  padding: 5px 10px;
  color: #fff;
}

.ma-to2{
	margin-top:2%;
}

.bold{
	font-weight:bold;
}

.ma-bo2{
	margin-bottom:2%;
}

.f20c-vtec-main-box h2 {
  margin-top: 2%;
}

.pa-10{
	padding:5px 15px;
}

.f129-ta-ttl4{
	background-color:#2087c3;
	color:#fff;
}

.ve-mi{
	vertical-align:middle;
}

.w-2{
	width:20%;
	margin:0 auto;
}
.w-4{
	width:40%;
	margin:0 auto;
}

.w-6{
	width:60%;
	margin:0 auto;
}

.w-8{
	width:80%;
	margin:0 auto;
}

.w-8m2{
	width:80%;
	margin:2% auto;
}

.w-10{
	width:100%;
	margin:0 auto;
}

.st-red{
	color:#d30e0e;
}

.st-bl{
	color:#142ef1;
}
.fo-18{
	font-size:18px;
}
.fo-22{
	font-size:22px;
}