@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
@media screen and (max-width: 1360px) {
   body {min-width: 100%;}
}

	.pc{ display: block;}
	.sp{ display: none;}
@media screen and (max-width:750px){
	.pc{ display: none;}
	.sp{ display: block;}
}

.flex {
   width: 100%;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   display: -webkit-flexbox;
   display: -moz-flexbox;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex;
   flex-wrap: wrap;
}

/* グーグルマップ */
.youtube {
   position: relative;
   padding-bottom: 55%;
   height: 0;
   overflow: hidden;
}
@media screen and (max-width: 750px) {
.youtube {
   padding-bottom: 60%;
}   
}
.youtube iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.en {
   font-family: 'Oswald', sans-serif;
   line-height: 1;
}

#trackman main {margin-bottom: 250px;}
@media screen and (max-width: 750px) {
#trackman main {margin-bottom: 125px;}   
}

#trackman img {
   max-width: 100%;
   width: 100%;
}

#mv {
   width: 100%;
   position: relative;
   height: 490px;
   margin-top: 121px;
}
#mv .bgimg {
   background: url("../img/trackman/mv.jpg") no-repeat center center/cover;
   height: 490px;
   width: 100%;
}
#mv .deco01 {
   position: absolute;
   bottom: -61px;
   left: 50%;
   transform: translateX(-50%);
}
#mv .deco01 .deco02 {
   position: absolute;
   width: 212px;
   right: -140px;
   top: -120px;
}
#mv .deco01 .deco02 img {
   max-width: 100%;
   width: 100%;
}

#mv-txt {margin-top: 15px; position: relative;}
#mv-txt h1 {
   display: block;
   max-width: 860px;
   width: 86%;
   margin: 0 auto;
}
@media screen and (max-width: 750px) {
#mv {height: clamp(225px,60vw,450px); margin-top: 50px}
#mv .bgimg {
   background: url("../img/trackman/mv-sp.jpg") no-repeat center center/cover;
   height: clamp(225px,60vw,450px);
   width: 100%;
} 
#mv .deco01 {
   width: 86%;
   bottom: -12.5%;
}
#mv .deco01 .deco02 {
   position: absolute;
   width: 106px;
   right: auto;
   top: -90px;
   left: 50%;
   transform: translateX(-50%);
}
}

/*--------------------------------------*/
.sec {
   background: linear-gradient(#ec6919, #000 320px);
   width: 100%;
   margin-top: 290px;
}
@media screen and (max-width: 750px) {
.sec {
   background: linear-gradient(#ec6919, #000 190px);
   width: 100%;
   margin-top: 150px;
} 
}

.sec .inner {
   max-width: 1200px;
   width: 90%;
   margin: 0 auto;
}
.sec .inner-small {
   max-width: 960px;
   width: 90%;
   margin: 0 auto;
}

.sec .inner-wide-letft {
   margin-right: calc((100vw - 1200px) / 2);
}
.sec .inner-wide-right {
   margin-left: calc((100vw - 1200px) / 2);
}
@media screen and (max-width: 1200px) {
.sec .inner-wide-letft {margin-right: 0;}
.sec .inner-wide-right {margin-left: 0;}  
}

.sec .inner .secimg {
   position: relative;
   top: -190px;
}
@media screen and (max-width: 750px) {
.sec .inner .secimg {
   top: -90px;
}  
}

.sec .blk-h2 {
   position: relative;
   text-align: center;
   color: #fff;
   margin-top: -220px;
   margin-bottom: 120px;
}

.sec h2 {
   font-size: 8.0rem;
   margin-bottom: 30px;
   color: #ec6919;
}

.sec h3 {
   font-size: 2.4rem;
   margin-bottom: 50px;
   line-height: 1.8;
   font-weight: bold;
}

.sec .h2sub {
   font-size: 2.5rem;
   font-weight: bold;
}
@media screen and (max-width: 750px) {
.sec .blk-h2 {
   position: relative;
   text-align: center;
   color: #fff;
   margin-top: -110px;
   margin-bottom: 30px;
}

.sec h2 {
   font-size: 4.0rem;
   margin-bottom: 15px;
}
.sec h3 {
   font-size: 1.6rem;
   margin-bottom: 20px;
}
.sec .h2sub {font-size: 1.6rem;}   
}

.sec .f-sec {
   justify-content: space-between;
      color: #fff;
}

.sec .f-sec .txt {line-height: 1.8;}

.sec .f-sec .f-w01 {width: 680px;} 
.sec .f-sec .f-w02 {width: calc(100% - 740px); position: relative}
@media screen and (max-width: 1360px) {
.sec .f-sec .f-w01 {width: 50% !important;} 
.sec .f-sec .f-w02 {width: 45% !important; padding-right: 5%; position: relative}
}
@media screen and (max-width: 750px) {
.sec h3 {text-align: center;}
.sec .f-sec {width: 100% !important}
.sec .f-sec .f-w01 {width: 100% !important; margin-bottom: clamp(40px,10vw,80px)} 
.sec .f-sec .f-w02 {width: 86% !important; padding-right: 0; margin: 0 auto}    
}
/*--------------------------------------*/

#sec01 .f-sec .f-w02 .deco {
   position: absolute;
   left: -250px;
   bottom: -150px;
}
#sec01 .f-sec {margin-bottom: 200px;}
@media screen and (max-width: 750px) {
#sec01 .blk-h2 {
   position: relative;
   margin-top: -145px;
}
#sec01 .f-sec {margin-bottom: 50px;}
}

/*--------------------------------------*/
#sec02  {
   background: linear-gradient(#ec6919, #000 540px);
}
#sec02 .f-sec .f-w01 {width: 800px; order: 2} 
#sec02 .f-sec .f-w02 {width: calc(100% - 860px); order: 1}
@media screen and (max-width: 750px) {
#sec02  {background: linear-gradient(#ec6919, #000 190px);
   }
#sec02 .f-sec {margin-bottom: 50px;}
#sec02 .f-sec .f-w01 {order: 1} 
#sec02 .f-sec .f-w02 {order: 2}  
}
/*--------------------------------------*/
#sec03  {
   background: linear-gradient(#ec6919, #000 580px);
}
@media screen and (max-width: 750px) {
#sec03  {background: linear-gradient(#ec6919, #000 190px);
   }
}
#sec03 .f-sec .f-w01 {width: 660px;} 
#sec03 .f-sec .f-w02 {width: calc(100% - 660px);}
/*--------------------------------------*/
#sec04  {
   background: linear-gradient(#ec6919, #000 600px);
}
#sec04 .f-sec .f-w01 {width: 650px; order: 2} 
#sec04 .f-sec .f-w02 {width: calc(100% - 700px); order: 1}
@media screen and (max-width: 750px) {
#sec04  {
   background: linear-gradient(#ec6919, #000 190px);
   }

#sec04 .f-sec .f-w01 {order: 1} 
#sec04 .f-sec .f-w02 {order: 2}  
}
/*--------------------------------------*/
#sec05  {
   background: linear-gradient(#ec6919, #000 600px);
}
@media screen and (max-width: 750px) {
#sec05 .blk-h2 {
   position: relative;
   margin-top: -145px;
}
#sec05  {
   background: linear-gradient(#ec6919, #000 190px);
   }
}

#news {
   max-width: 1040px;
   margin: 100px auto 0;
   padding: 0 40px;
}

#news .blk-h2 {
   text-align: center;
   color: #fff;
}

#news h2 {
   font-size: 6rem;
   color: #ec6919;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 700;
   letter-spacing: .05em;
}

#news h2::before,
#news h2::after {
   content: "";
   display: inline-block;
   background-color: #ec6919;
   height: 3px;
   width: 100%;
   vertical-align: middle;
   /* margin-left: 1em; */
}

#news h2::before {
   margin-right: 40px;
}

#news h2::after {
   margin-left: 40px;
}


#news .h2sub {
   font-weight: bold;
   font-size: 1.8rem;
   color: #fff;
   margin-top: 16px;
}

#news .news-list {
   margin-top: 80px;
   display: flex;
   gap: 60px;
}

#news .news-item {
   max-width: 450px;
   width: 100%;
}

#news .news-item .post__date {
   font-size: 1.8rem;
   color: #c8bb9b;
   font-family: 'Cinzel Decorative', cursive;
   font-weight: 600;
   letter-spacing: 0.05em;
}

#news .news-item .news-card__img img{
   object-fit: cover;
   aspect-ratio: 3 / 2;
}

#news .news-item .news-card__meta {
   display: inline-block;
}


#news .news-item .news-card__meta {
   margin-top: 40px;
}

#news .news-item .post__category {
   font-size: 1.4rem;
   color: #aaa;
   margin-left: .5em;
}

#news .news-item .news__title {
   font-size: 1.4rem;
   color: #fff;
   font-weight: bold;
   font-size: 1.8rem;
   margin-top: 24px;
}

#news .news-item .news__text {
   font-size: 1.4rem;
   line-height: 1.85;
   margin-top: 24px;
   color: #aaa;
}

#news .btn-sq {
   margin-top: 60px;
   text-align: center;
}

#news .btn-sq>a {
   display: inline-block;
   border: 2px solid #ec6919;
   padding: .75em 2em;
   color: #ec6919;
   font-size: 1.4rem;
}

#news .btn-sq>a:hover {
   background-color: #ec6919;
   color: #000;
}

#news .news-item .news-card__meta.new {
   position: relative;
}

@media screen and (min-width: 751px) {
   #news .news-item .news-card__meta.new::after {
      content: "NEW";
      position: absolute;
      font-family: 'Saira Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.07em;
      background-color: #E5004F;
      color: #FFF;
      padding: 3.5px 7.5px;
      border-radius: 4px;
      margin-left: 15px;
      top: 50%;
      transform: translateY(-50%);
   }
   
}
@media screen and (max-width: 750px) {
   #news {
      margin: 55px auto 0;
      padding: 0 25px;
   }
   
   #news .blk-h2 {
      text-align: center;
      color: #fff;
   }
   
   #news h2 {
      font-size: 3.5rem;
      color: #ec6919;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   #news h2::before {
      margin-right: 15px;
   }
   
   #news h2::after {
      margin-left: 15px;
   }
   
   #news .h2sub {
      font-size: 1.2rem;
      margin-top: 15px;
   }
   
   #news .news-list {
      margin-top: 35px;
      display: flex;
      justify-content: center;
      gap: 25px;
   }

   #news .news-item .post__date {
      font-size: 1.4rem;
      display: flex;
      align-items: center;
   }
   
   #news .news-item .news-card__img img{
      object-fit: cover;
      aspect-ratio: 3 / 2;
   }
   
   #news .news-item .news-card__meta {
      display: flex;
      flex-direction: column;
   }
   
   #news .news-item .news-card__meta.new {
      position: relative;
   }
   
   #news .news-item .news-card__meta.new .post__date::after {
      content: "NEW";
      font-family: 'Saira Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.07em;
      background-color: #E5004F;
      color: #FFF;
      padding: 0.25em 0.5em;
      border-radius: 2px;
      margin-left: 12px;
   }
   
   #news .news-item .news-card__meta {
      margin-top: 18px;
   }
   
   #news .news-item .post__category {
      font-size: 1rem;
      margin-left: 0;
      margin-top: 1em;
   }
   
   #news .news-item .news__title {
      font-size: 1.2rem;
      margin-top: .75em;
      line-height: 1.5;
   }
   
   #news .news-item .news__text {
      font-size: 1rem;
      line-height: 1.5;
      margin-top: 2em;
   }
   
   #news .btn-sq {
      margin-top: 40px;
      text-align: center;
   }
   
   #news .btn-sq>a {
      font-size: 1.1rem;
   }
   
   #news .btn-sq>a:hover {
      background-color: #ec6919;
      color: #000;
   }
}