@font-face {
  font-family: 'DIN';
  src: url('../fonts/DINEngschriftStd.otf') format('opentype');
  font-display: swap; /* 読み込み中に代替フォントを表示する設定 */
}


html{
    font-size:calc(1000px / 62);
    min-height:0;
}

@media (max-width:1000px){
    html{
        font-size:calc(100vw / 62);
    }   
}

@media (max-width:768px){
    html{
        font-size:calc(100vw / 48);
    }
}

@media (max-width:480px){
    html{
        font-size:calc(100vw / 34);
    }
}


@media (min-width:481px){ .show-S{ display:none !important; } }
@media (min-width:769px){ .show-MS{ display:none !important; } }
@media (min-width:769px) and (max-width:480px){ .show-M{ display:none !important; } }
@media (max-width:480px){ .show-LM{ display:none !important; } }
@media (max-width:768px){ .show-L{ display:none !important; } }


* {
    box-sizing: border-box;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
}

body {
    color: #333;
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover{
    opacity:0.5;
}


img{
  width:100%;
}

header {
border-bottom: 3px solid #cb1021;
padding:5px 20px;
}

.header_logo {
display:inline-block;
max-width: 25%;
}

.first{
max-width:1300px;/*全体幅*/ 
margin:0 auto;
padding:0 20px 50px 20px;
}

.first .title{
    margin:20px 0;
    display:flex;
     align-items: center; 
}

.first .title .letter .title_date{
    font-size:0.8rem;
    margin-right:5px;
    display:inline-block;
}
.first .title .letter .title_title{
    font-size:1.2rem;
    font-weight:bold;
    display:inline-block;
}

.first .fvimg img{
    border-radius: 20px;
}

.article{
    max-width:1300px;/*全体幅*/ 
    margin:0 auto;
    padding:0 20px 0 20px;
    display:flex;
    gap:30px;
}
.article .left{
    flex-basis:100%;
    margin-bottom:70px;
}
.article .right{
    flex-basis:600px;
}
.article .h1{
    color:#1d2087;
    font-size:1.5rem;
    font-weight:bold;
    margin-bottom:20px;
}
.article .b1{
    margin-bottom:70px;
}
.article .left_photo{
    margin-bottom:40px;
}

.article .h2{
    color:#cb1021;
    font-size:1.1rem;
    font-weight:bold;
    margin-bottom:20px;
}



.article .right .index,
.article .right .driver{
    border:solid 5px #e5e5e5;
    padding:10px 10px;
    position:relative;
    margin-bottom:70px;
}

.article .right .index .right_title,
.article .right .driver .right_title{
    font-family: 'DIN', sans-serif;
    position:absolute;
    top:0;
    left:10px;
    transform:translateY(-50%);
    font-size:2.5rem;
}
.article .right .index .list{
    display:flex;
    align-items: center;
    margin:20px 0;
}
.article .right .index .list .dan,
.first .title .dan{
    width:60px;
    display:inline-block;
    font-size:0.9rem;
    position:relative;
    margin-right:10px;
    padding:10px 5px;
    text-align: center;
}
.article .right .index .active .dan,
.first .title .dan{
    background:#cb1021;
    color:#fff;
}
.article .right .index .active .dan:after,
.first .title .dan:after{
  content: "";
  position: absolute;
  top: 0; 
  left:100%;
  width: 5px;
    height: 100%; 
    background: #cb1021;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.article .right .index .click .dan{
    background:#e5e5e5e5;
    color:#000;
}
.article .right .index .comming .dan{
    background:#e5e5e5e5;
    color:#999;
}
.article .right .index .list .list_lt{
    display:inline-block;
}
.article .right .index .list .list_lt .list_date{
    font-size:0.8rem;
}
.article .right .index .list .list_lt .list_title{
    font-weight:bold;
}

.article .right .index .comming .list_lt{
    color:#999;
    font-weight: bold;
}
.article .right .driver .driver_photo{
    margin:20px 0 30px 0;
}
.article .right .driver .driver_photo img{
    border-radius: 20px;
}
.article .right .driver .driver_name{
    font-family: 'DIN', sans-serif;
    text-align:center;
    font-size:2rem;
    color:#1d2087;
    font-weight: bold;
    line-height:2rem;
    margin-bottom:10px;
}
.article .right .driver .driver_obi{
    font-size:0.8rem;
    text-align: center;
    background:#1d2087;
    color:#fff;
        font-weight: bold;
    line-height:2rem;
    margin-bottom:10px;
}
.article .right .driver .driver_history{
    font-size:0.7rem;
    margin-bottom:20px;
}
.article .right .driver .driver_sns{
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    margin-bottom:20px;
}
.article .right .driver .driver_sns .sns_calc{
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    margin-bottom:10px;
}
.article .right .driver .driver_sns .sns_sum{
    width:40%;
}

.pickup{
max-width:1300px;/*全体幅*/ 
margin:0 auto;
padding:0 20px 20px 20px;
}

.pickup .obi{
   border-bottom:solid 3px #cb1021;
   margin-bottom:40px;
}

.pickup .obi span{
    background:#cb1021;
    font-family: 'DIN', sans-serif;
    font-size:1.8rem;
    letter-spacing: 0.3rem;
    color:#fff;
    display:inline-flex;
    align-items:center; 
    padding:0 40px;   
    padding:10px 40px;
    position:relative;
}
.pickup .obi span::after{
  content: "";
  position: absolute;
  top: 0; 
  left:100%;     /* 右端に合わせる */
  width: 2em;          /* 三角形の幅も文字サイズに比例させる */
    height: 100%;        /* 帯の高さがどれだけ変わっても100%追従 */
    background: #cb1021;
    clip-path: polygon(0 0, 100% 100%, 0 100%);/* 右下を削り落として三角形にする */
}

.pickup .parts{
    display:flex;
    gap:20px;
    flex-wrap: wrap;
}

.pickup .parts .parts_inner{
    flex-basis: calc(50% - 10px);
    margin-bottom:30px;
}
.pickup .parts .parts_inner .parts_title{
    border-left:solid 5px #cb1021;
    padding-left:10px;
}

.pickup .parts .parts_inner .parts_title .logo{
    display:inline-block;
    width:150px;
}

.pickup .parts .parts_inner .parts_title .letter{
    font-size:1.1rem;
    font-weight:bold;
    padding-bottom:10px;
}
.pickup .parts .parts_inner .parts_head{
    font-size:1.3rem;
    margin-bottom:15px;
}
.pickup .parts .parts_inner .parts_head:after {
    background: radial-gradient(circle farthest-side, #cb1021, #cb1021 60%, transparent 60%, transparent);
    background-size: 5px 5px;
    content: '';
    display: block;
    height: 5px;
    width: 200px;
}
.pickup .parts .parts_inner .parts_img{
    margin-bottom:5px;
}
.pickup .parts .parts_inner .parts_body{
    font-size:0.9rem;
    margin-bottom:20px;
}
.pickup .parts .parts_inner .parts_button a{
    background:#1d2087;
    border-radius: 100px;
    display:inline-block;
    color:#fff;
    text-align: center;
    font-size:0.9rem;
    width:100%;
    max-width:300px;
    padding:6px 0;
    margin:0 10px 10px 0;
}

footer {
background-color: #cb1021;
color: #fff;
}



footer .footer_logo {
max-width: 12rem;
margin: 0 auto;
text-align: center;
}

footer span {
display: block;
padding: 0.25rem;
font-size: 0.7rem;
text-align: center;
}

.space-5 {
height: 5rem;
}


@media (max-width:768px){
header {
text-align: center;
}
.header_logo {
max-width: 50%;
}
.article{
    flex-wrap: wrap;
}
.article .left{
    flex-basis:100%;
    order:2;
}
.article .right{
    flex-basis:100%;
    order:1;
}
.article .right .driver .driver_photo{
    max-width:300px;
    margin:20px auto 30px auto;
}
    .pickup .parts .parts_inner{
    flex-basis:100%;
}
.pickup .obi{
   border-bottom:solid 3px #cb1021;
   margin-bottom:40px;
}

.pickup .obi span{
    font-size:1.8rem;
    letter-spacing: 0.1rem;
    color:#fff;
    padding:0 20px;
}

}