/* リセット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: "myfont",'Noto Serif JP', 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;background-image:url(./img/slideshow7-1.png);background-size:cover;background-position:top;}
.slant-bg::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.6);}
.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:160px;color:#fff;opacity:.05;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:10%;z-index:1;}
.top-menu a{margin:0 20px;color:#fff;font-weight:bold;margin-bottom:5px;}
.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%;}
}
@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;}
  .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:60px;left:-14px;}
  .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:60px;}
  .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;}
@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-top:17%;}
.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:.2rem;}
.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{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:15%;}
.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-trigger{top:.5rem;right:20px;}
  .nav-trigger a h6{width:100px;height:4.5rem;}
  .nav-trigger a h5{top:3rem;right:61px;}
}
@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%;}
}
@media screen and (max-width:700px){
  .nav{padding-top:20%;}
  .nav-container{width:60%;}
  .nav li{padding:1.3rem 0 0 6%;}
  .nav-trigger a h5{right:62px;}
}
@media screen and (max-width:500px){
  .nav{padding-top:40%;}
  .nav-container{width:70%;}
  .nav li{padding:1rem 0 0 6%;}
  .nav-trigger{right:16px;}
  .nav-trigger a h6{width:90px;height:4rem;}
  .nav-trigger a h5{top:2.6rem;right:57px;}
  .nav1::after{left:45%;}
  .nav a h1{font-size:20px;}
}


/*---------------------- 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:5% 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:5% 4% 0;position:relative;z-index:9;}
.about-inner-box h6{color:rgba(166, 166, 166, 1);margin:4% 5% 0;position:relative;z-index:9;}
.about-inner-box p{color:rgba(166, 166, 166, 1);margin:1% 0;}
.about-box-left-top{width:350px;height:160px;margin:5px;}
.about-box-left-bot-right,.about-box-left-bot-left{width:170px;height:255px;margin:5px;background-size:cover;background-repeat:no-repeat;}
.about-box-left-top span{width:350px;height:160px;}
.about-box-left-bot-right span,.about-box-left-bot-left span{width:170px;height:255px;}
.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:535px;height:425px;margin:5px;background-image:url(./img/top-mortor.jpg);background-size:cover;}
.about-box-right span{background-color:rgba(87, 87, 87, 0.8);}
.about-box-left-top,.about-box-left-bot-right,.about-box-left-bot-left{background-image:url(./img/top-mortor.jpg);background-size:cover;}
.about-box-left-top p{top:90px;left:10px;z-index:9;}
.about-box-left-top h2{top:90px;left:10px;z-index:9;}

.about-box-left-bot-left p{top:155px;left:10px;z-index:9;}
.about-box-left-bot-left h2{top:155px;left:10px;z-index:9;}

.about-box-left-bot-right p{top:180px;left:10px;z-index:9;}
.about-box-left-bot-right h2{top:180px;left:10px;z-index:9;}

.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:14px;z-index:5;z-index:9;}

.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 h1::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;}
}
@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;}
}
@media screen and (max-width:800px){
  .about-inner-box h1::after{left:40%;}
  .about-inner-box h3{font-size:14px;}
}
@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-bot-right,.about-box-left-bot-left{width:50%;height:200px;}
  .about-box-left-bot-left{margin:0 2.5px 0 0;}
  .about-box-left-bot-left p,.about-box-left-bot-left h2{top:130px;}
  .about-box-left-bot-right p,.about-box-left-bot-right h2{top:130px;}
  .about-box-left-bot-right{margin:0 0 0 2.5px;}
  .about-box-right{width:100%;height:380px;margin:5px auto;}
  .about-inner-box h1{margin:0 2%;padding:4% 0;}
  .about-inner-box h1::after{width:40%;left:25%;}
  .about-box-right a{padding:4px 25px 3px;}
  .co-link{font-size:13px;}
}
@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-left-bot-right,.about-box-left-bot-left{height:160px;}
  .about-box-left-bot-left p,.about-box-left-bot-left h2{top:100px;}
  .about-box-left-bot-right p,.about-box-left-bot-right h2{top:100px;}
  .about-box-left-top p,.about-box-left-bot-left p,.about-box-left-bot-right p{font-size:11px;}
  .about-inner-box h1::after{left:28%;}
  .about-inner-box h3{font-size:13px;}
}

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

.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 li p,.news li h3,.news li h6,.news-li-a{display:inline-block;}
.news li{margin:5px 0 5px 100px;display:inline-block;}
.news ul hr{margin-left:80px;opacity:.4;}
.news li h3{font-size:10px;padding:4px 0 0;width:80px;text-align:center;color:#ffffff;vertical-align:middle;}
.news li p{font-size:12px;color:#6B6B6B;margin-right:15px;}
.news li a{margin:5px 0 0 20px;width:100%;}
.news li a:hover{opacity:.6;}
.seihin{background-color:#D81212;}
.osirase{background-color:#7C7C7C;}

.news-a-box{background-color:#C31A1A;padding:5px 50px 7px 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;}

@media screen and (max-width:1100px){
  .ttl-box{width:30%;}
  .news li{margin:5px 0 5px 40px;}
}
@media screen and (max-width:950px){
  .news-box{width:90%;}
  .ttl-box{margin-left:0;}
  .news li{margin:5px 0 5px 30px;}
}
@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%;}
  .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: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;}
}


/*---------------------- 製品・サービス ----------------------*/
.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;}
}

/*---------------------- コンタクト ----------------------*/
.contact{width:100%;margin:7% auto 0;background-color:#9c9c9c;padding:50px 0 80px;overflow:hidden;}
.contact-ttl{margin:0 10% 0 6%;width:16%;}

.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;}
.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){
  .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:1000px){
  .con-box-right{width:75%;}
}
@media screen and (max-width:950px){
  .co-back-font{font-size:110px;}
}
@media screen and (max-width:800px){
  .con-box-right{width:80%;}
  .co-back-font{top:-15px;}
}
@media screen and (max-width:700px){
  .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/top-mortor.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
{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
{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;}	
}