@charset "UTF-8";

/*-------------------------------------------------------

reset

-------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td,figure {
  margin:0; 
  padding:0; 
  line-break: strict;/*IE禁則処理*/ }

table { 
  border-collapse:collapse; 
  border-spacing:0; }

fieldset,img {border:0; }

address,caption,cite,code,dfn,em,th,var,strong { 
  font-style:normal;
  font-weight:normal; }

ol,ul { list-style:none; }

caption,th { text-align:left; }

h1,h2,h3,h4,h5,h6 { 
  font-size:100%; 
  font-weight:normal; }

q:before,q:after {content:''; }

abbr,acronym {border:0; }

legend {color: #333; }

input, textarea, button{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none; }

input, textarea, select{
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #E4E2D6;
  color: inherit;
  font-size: 1em;
  line-height: 1.2; }

input[type="submit"], input[type="reset"]{border: 0; }

img{
  vertical-align: bottom;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: auto; }

@media screen and (min-width:768px){
  a:hover, a:active {outline: none; } }

/*-------------------------------------------------------

common style

-------------------------------------------------------*/
body{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size: 20px;
  line-height:1.6;
  background:#fff;
  font-family: "FP-ヒラギノ角ゴ StdN W3", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  color:#333;
  width: 100%;
  overflow-x: hidden;
  letter-spacing: 0.02em;}
  @media screen and (min-width:768px) and (max-width:1920px){
    body{font-size: calc(11px + 8 * (100vw - 768px)/1152); } }
  @media screen and (min-width:375px) and (max-width:767px){
    body{font-size: 16px; } }
  @media screen and (max-width:374px){
    body{font-size: calc(13px + 3 * (100vw - 320px)/54); } }

.clearfix::after {
   content: "";
   display: block;
   clear: both;}

button, input, select, textarea{
  font-family: inherit;
  font-size: 100%; }


/* 斜め背景 -------------------------------------------------------*/
.bgDiagonal{
  position: relative;
  z-index: 0;}

/*赤ライン*/
.bgDiagonal::before {
    position: absolute;
    content: "";
    display: block;
    top: -0.8vw;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: skewY(-4.1deg);
    -ms-transform: skewY(-4.1deg);
    transform: skewY(-4.1deg);
    z-index: -10;
    background-color: #C3102E; }

/*紺ライン*/
.bgDiagonal::after{
    position: absolute;
    content: "";
    display: block;
    top: -1.6vw;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: skewY(-3.2deg);
    -ms-transform: skewY(-3.2deg);
    transform: skewY(-3.2deg);
    z-index: -11;
    background-color: #02003E; }

/*本文エリア*/
.bgDiagonal-inner{
  padding-bottom: 6rem;}
  @media screen and (min-width:768px){
    .bgDiagonal-inner:not(.recruit-inner){
  padding-bottom: 10vw;} }

.bgDiagonal-inner::before {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    transform: skewY(-5deg);
    z-index: -10; }

.bgDiagonal-inner.bg-gray::before {
    background-color: #f0f2f5; }

.bgDiagonal-inner.bg-white::before {
    background-color: #ffffff; }


/* 背景色 -------------------------------------------------------*/
.bg-white:not(.bgDiagonal-inner){background:#fff;}

.flow-grad,
.box-grad::before,
.link-button:before,
#nav-main-button button,
.line-grad::before{
  background: rgb(195,16,46);
  background: -moz-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 33%, rgba(2,0,62,1) 67%, rgba(195,16,46,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 33%, rgba(2,0,62,1) 67%, rgba(195,16,46,1) 100%);
  background: linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 33%, rgba(2,0,62,1) 67%, rgba(195,16,46,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C3102E",endColorstr="#02003E",GradientType=1);
  background-size: 300% auto; }

    @media screen and (min-width:768px){
.link-button::before{
  transition: .3s;}}

  @media screen and (min-width:768px){
.link-button:hover::before{
  background-position: right center;}}

.box-grad{
  position: relative;
  z-index: 0;
  padding: calc(1em + 3px);}
.box-grad::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;}
.box-grad::after{
  content:"";
  position: absolute;
  background: #fff;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  z-index: -1;}

.line-grad{
  position: relative;
  z-index: 0;
  padding-bottom: 0.3em;}
.line-grad::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;}
.line-grad::after{
  content:"";
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 3px);
  z-index: -1;}


/* リンク -------------------------------------------------------*/
.link-button{
  position: relative;
  z-index: 0;
  display: inline-block;
  text-decoration: none;
  background: none;
  color: #fff;
  padding: 1em 2em 1em 3em;
  border: 0;
  cursor: pointer;}

.link-button:before{
  content: "";
  position: absolute;
  height: 100%;
  z-index: -1;
  top: 50%;
  left: 50%;
  padding: 0 3em;
  width: 80%;
  max-width: 600px;
  transform: skew(-15deg) translate(-50%, -50%);
  transform-origin: top;}

.link-button .fa-solid{
  margin-right: 0.3em;}

.link-button i{
  position: absolute;
  top: 50%;
  left: 1.5em;
  transform: translate(0, -50%);
}


/* リスト -------------------------------------------------------*/
.list{
  counter-reset: li;
  list-style-type: none;}

.list > li{
  margin-top: 1em;
  line-height: 1.3;}

.li-circle > li {
    margin-left: calc(0.8em + 0.5em);}

.li-circle > li:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    background: #e6e6e6;
    width: 0.5em;
    height: 0.5em;
    margin-bottom: 0.2em;
    vertical-align: middle;
    margin-right: 0.6em;
    margin-left: calc(-0.6em - 0.5em);}


/* テーブル -------------------------------------------------------*/
.table-common{
  width: 100%;
  border-spacing: 0; }
.table-common tr + tr{ 
  border-top: 2px solid #E6E6E6; }
.table-common th {
  padding: 1.5em 1em 1.5em 0;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;}
.table-common td {
  padding: 1.5em 1em 1.5em 0;
  vertical-align: top;
  text-align: left; }


/* 開閉アコーディオン -------------------------------------------------------*/
.accordion{
  text-align: center;
  padding-bottom: 1.5em;}
.accordion-wrapper{
  text-align: left;}

/*アコーディオンの＋マーク*/
.accordion-heading-txt::before,
.accordion-heading-txt::after{
  content: "";
  width: 1.2rem;
  height: 2px;
  background: #fff;;
  position: absolute;
  top: 50%;
  left: 0.2em;
  transition: .3s; }
.accordion-heading-txt::before{transform: translateY(-50%); }
.accordion-heading-txt::after{transform: translateY(-50%) rotate(90deg); }
.accordion-heading.open .accordion-heading-txt::after {transform: translateY(-50%); }


/* タブ切り替え -------------------------------------------------------*/
/*input要素は非表示*/
.tab-input {display: none;}
/*タブエリアの設定*/
.tab {
  display: grid;
  grid-template-rows:auto 1fr;
  grid-template-columns:repeat(3, 1fr);}
@media screen and (min-width:768px){
  .tab {grid-template-columns:1fr repeat(3, calc(160px + 4vw)) 1fr;} }

/*タブボタン部分*/
.tab-button {
  grid-row: 1 / 2;
  padding: 0.5em 1em;
  border-right: 2px solid #575757;
  cursor: pointer;
  text-align: center;
  order: -1;
  color: #C3102E;
  background: #E8E9EF;}
  #tab-highschool + .tab-button {
  border-right: 0;}
@media screen and (min-width:768px){
  #tab-university + .tab-button {grid-column: 2 / 3;}
  #tab-vocational + .tab-button {grid-column: 3 / 4;}
  #tab-highschool + .tab-button {grid-column: 4 / 5;}
  .tab-button{
    transition: .3s;}
  .tab-button:not(.tab-input:checked + .tab-button):hover{
    color: #fff;
    background: #C3102E;} }

/*コンテンツ部分*/
.tab-box {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
  width: 100%;
  padding: 2em 1em;
  box-sizing: border-box;
  background: #fff;}
@media screen and (min-width:768px){
  .tab-box {grid-column: 1 / 6;} }

.tab-box-inner p{
  margin-top: 1em;}

/*フェイドインアニメーションのために透明度を０に*/
.tab-box-inner {opacity: 0;}

/*タブを選択したとき*/
.tab-input:checked + .tab-button {background: #fff;}
.tab-input:checked + .tab-button + .tab-box {display: block;}

/*コンテンツをフェイドインするアニメーション*/
.tab-input:checked + .tab-button + .tab-box .tab-box-inner{
  animation: fadeIn .5s forwards;}

@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}}


/* レイアウト -------------------------------------------------------*/
.section-title{
  padding-top: 3em;
  line-height: 0.8;}

.marginTop{
  margin-top: 1em;}

.marginTop-large{
  margin-top: 2em;}

.w1024{
  padding-right: 4vw;
  padding-left: 4vw;}  
.sp-wide{
  padding-right: 0;
  padding-left: 0;}
@media screen and (min-width:768px){
.w1024{
  max-width: 1024px;
  padding-right: 2vw;
  padding-left: 2vw;
  margin-right: auto;
  margin-left: auto;}}

.br-group{
  display: inline-block;}

@media screen and (min-width:768px){
  .pc-none{display: none;}}

.sp-none{
  display: none;}
  @media screen and (min-width:768px){
    .sp-none{display: block;}}

.txt-centerleft{
  display: inline-block;
  text-align: left;}


/* 文字 -------------------------------------------------------*/
/*大見出し*/
.heading-large{
  font-size:2.2em;}
/*中見出し*/
.heading-medium{
  font-size:1.7em;
  line-height: 1.3;}
/*小見出し*/
.heading-small{
  font-size:1.4em;
  line-height: 1.4;}
/*サブ見出し*/
.heading-sub{
  font-size:0.55em;
  color: #02003E;
  margin-top: 0.9em;
  display: inline-block;
  letter-spacing: 0.1em;}

/*極太字*/
.xbold,
.heading-large,
.heading-sub,
.visual-copy,
.mod-header-siteid{
  font-family: "FP-ヒラギノ角ゴ StdN W7", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: bold;}

/*太字*/
.bold,
.heading-medium,
.heading-small,
.nav-main-list,
.philosophy-title,
.strength-title,
.tab-button,
.table-common th,
.history dt,
.news-list li a time{
  font-family: "FP-ヒラギノ角ゴ ProN W6", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: bold;}

.color-grad{
  background: rgb(195,16,46);
  background: -moz-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 100%);
  background: linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(2,0,62,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C3102E",endColorstr="#02003E",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block!important;
  height: 100%;}
  @media screen and (min-width:768px){
.color-grad-left{
  background: rgb(195,16,46);
  background: -moz-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(84,7,43,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(84,7,43,1) 100%);
  background: linear-gradient(90deg, rgba(195,16,46,1) 0%, rgba(84,7,43,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C3102E",endColorstr="#54072b",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block!important;
  height: 100%;}
.color-grad-right{
  background: rgb(195,16,46);
  background: -moz-linear-gradient(90deg, rgba(84,7,43,1) 0%, rgba(2,0,62,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(84,7,43,1) 0%, rgba(2,0,62,1) 100%);
  background: linear-gradient(90deg, rgba(84,7,43,1) 0%, rgba(2,0,62,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#54072b",endColorstr="#02003E",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block!important;
  height: 100%;}}

.color-red{
  color: #C3102E;}

.txt-marker{
  position: relative;
  margin:0.1em 0;
  display: inline-block;}

.txt-marker::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left :0;
    background: #fff;}

.txt-marker .color-grad{
  position: relative;}

.center{
  text-align: center; }


/*-------------------------------------------------------

mainNav

-------------------------------------------------------*/
.frame-header{
  width: 100%;
  position: fixed;
  z-index: 9999;}
  @media screen and (min-width:768px){
    .frame-header{
      background: #fff; } }

.frame-header-inside{
  display: grid;
  grid-template-columns:1fr 56px; }
  @media screen and (min-width:768px){
    .frame-header-inside{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto; } }

.mod-header-siteid{
  z-index: 9999;
  height: 54px;
  position: relative;
  background: #fcfcfc;
  padding-left: 2vw;
  padding-right: 5px;
  font-size: min(calc(11px + 5 * (100vw - 320px)/140) , 16px);
  display: flex;
  align-items: center;}
  @media screen and (min-width:768px){
    .mod-header-siteid{
      background: none;
      height: 58px;
      font-size: 1em;
      line-height: 54px;
      grid-column: 1 / 2;
      padding-left: 1.5rem;}}

.mod-header-siteid a{
  text-decoration: none;
  color: #333;}

/*メニュー開閉ボタン*/
#nav-main-button{
  grid-column: 2/3;
  height: 54px;
  position:relative;
  z-index: 9999;}
  @media screen and (min-width:768px){
    /*PCのときは非表示*/
    #nav-main-button{display: none; } }

#nav-main-button button{
  display: block;
  width:56px;
  height:100%;
  cursor: pointer;
  transition: all .4s;
  color:#fff;
  border:0;
  text-align: center;}
#nav-main-button .nav-main-button-icon{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height:100%;
  box-sizing: border-box;
  padding-top:5px;
  font-size:10px;
  letter-spacing: 0.1em;}
#nav-main-button button:before,
#nav-main-button .nav-main-button-icon:before,
#nav-main-button .nav-main-button-icon:after{
  position: absolute;
  left: 50%;
  margin-left: -23%;
  width: 46%;
  height: 3px;
  background-color: #fff;
  transition: all .4s; }

/*メニュー開閉ボタン タップ前*/
#nav-main-button button:before{
  content:"";
  bottom:31px;}
#nav-main-button .nav-main-button-icon:before{
  content:"";
  bottom:22px;}
#nav-main-button .nav-main-button-icon:after{
  content:"";
  top:11px;}
.label-menu{
  display: block;
  margin-top: 31px;}
.label-close{
  display: none;
  margin-top: 31px;}

/*メニュー開閉ボタン タップ後*/
.active{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;}
.active #nav-main-button button:before,
.active #nav-main-button span:before,
.active #nav-main-button span:after{
  background-color: #fff;
  transition: all .3s;}
.active #nav-main-button span:before{
  -webkit-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg); }
.active #nav-main-button button:before{opacity: 0; }
.active #nav-main-button span:after{
  -webkit-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg); }
.active .label-menu{
  display: none;}
.active .label-close{
  display: block;}

/*グローバルメニュー 開閉部分*/
.frame-header-nav{
  grid-column: 1/3;
  width:100%;
  height:100%;
  position: fixed;
  z-index: 9998;
  box-sizing: border-box;
  padding-top:54px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,.5);}
  @media screen and (min-width:768px){
    .frame-header-nav{
      position: initial;
      padding-top: 0;
      height:auto;
      background: none;
      bottom :auto;
      grid-column: 2 / 3;} }

/*メニューを表示する*/
.active .nav-main-showhide{
  display: block!important;
  animation: show .3s ease;
  animation-fill-mode: both;}
  @keyframes show {
    0%{opacity: 0;}
    100%{opacity: 1;} }

/*メニューを隠す*/
.inactive .nav-main-showhide{
  pointer-events: none;
  animation: hide .3s ease;
  animation-fill-mode: both;}
  @keyframes hide {
    0%{opacity: 1;}
    100%{opacity: 0;} }
  @media screen and (min-width:768px){
    .inactive .nav-main-showhide{
      pointer-events:auto;} }

.hide .nav-main-showhide{display: none!important;}
  @media screen and (min-width:768px){
    /*PCのときは表示*/
    .hide .nav-main-showhide,.nav-main-showhide{
      display: block!important;
      opacity: 1!important;} }

/*メインメニュー*/
.mod-header-nav{
  height: 100%;
  overflow: auto;}
@media screen and (min-width:768px){
  .mod-header-nav{
    background: none;
    padding: 0;
    overflow:visible; } }

.nav-main-list{
  background:#fcfcfc;
  padding: 0 5vw;
  position: relative;}
  @media screen and (min-width:768px){
    .nav-main-list{
      display: flex;
      justify-content: flex-end;
      background: none;
      height: 100%;
      gap: 5vw;
      padding: 0 4vw 0 0; } }

.nav-main-list li{
  border-bottom: 2px solid #E9EAF0;}
@media screen and (min-width:768px){
  .nav-main-list li{
    text-align: center;
    border: none; } }

.nav-main-list li a{
  padding:0.8em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-decoration: none;
  color: #333; }
  @media screen and (min-width:768px){
    .nav-main-list li a{
      padding: 0;
      height: 100%;
      font-size: min(calc(10px + 6 * (100vw - 768px)/598) , 16px );
      position: relative; } }

@media screen and (min-width:768px){
.scroll:hover{
  color: #C3102E; }}


/*-------------------------------------------------------

header

-------------------------------------------------------*/
.header{
  background:#fff;}
  @media screen and (min-width:768px){
    .header{
      align-items: center;
      display: flex;
      padding: 0 2.5vw;
      position: fixed;
      z-index: 999;
      width:100%;
      box-sizing: border-box;} }
  @media screen and (min-width: 768px) and (max-width: 1920px){
    .header {font-size: calc(9px + 11 * (100vw - 768px)/1152);} }

@media screen and (max-width:767px){
  .header-container{
    display: flex;
    flex-wrap: nowrap;
    height:54px;
    z-index: 999;
    position: fixed;
    width:100%;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);} }

@media screen and (min-width:768px){
  .header-siteid{
    padding: 0.7em 0;} }
    @media screen and (max-height:900px) and (min-width:1060px){/*縦幅調整*/
      .header-siteid{
        padding-top: 0.5em;
        padding-bottom: 0.5em; } }

@media screen and (max-width:767px){
  .header-siteid{
    flex: 1;
    background:#fff;
    text-align: left;
    padding: 0.8em 0 0.5em 2vw; } }

.link-header-siteid{
  display: inline-block;
  font-size:0.8em;}
  @media screen and (max-width:767px){
    .link-header-siteid{font-size:0.67em; } }

.link-header-siteid:hover{
  text-decoration: none;}

.img-logo{
  width:2em;
  margin-right: 0.5em;
  max-width: 35px;
  vertical-align: middle; }

/*ページ内スクロール用設定*/
.jumper {
    padding-top: 4em;
    margin-top: -5em;}


/*-------------------------------------------------------

メインビジュアル

-------------------------------------------------------*/
.visual{
  position: relative;
  padding-top: 54px;}

  .visual-copy{
  position: absolute;
  z-index: 1;
  top: calc(54px + 1.5rem);
  left: 1.5rem;
  font-size: calc(26px + 22 * (100vw - 320px)/448);
  line-height: 1.2;
  letter-spacing: 0.05em;}
  @media screen and (min-width:768px){
    .visual-copy{
      font-size: 2.7em;
      left: 3vw;
      top: auto;
      bottom: 14vw;} }

.visual-lead{
  position: absolute;
  z-index: 1;
  color: #fff;
  background: rgba(13,12,45,.3);
  bottom: 10vw;
  padding: 2vw 1.5rem;
  font-size: calc(16px + 6 * (100vw - 320px)/448);}
@media screen and (min-width:768px){
.visual-lead{
  font-size: 0.8em;
  padding: 1.2vw 1.5rem;
  left: 3vw;
  bottom: 7vw;}}

  .visual-img{
  width: 100%;
  height: calc(135vw - 5vw);}
  @media screen and (min-width:768px){
     .visual-img{
  height: auto;
  max-height: calc(90svh - 54px);}}

.visual-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;}
  @media screen and (min-width:768px){
    .visual-img img{
      height: 90svh;}}


/*-------------------------------------------------------

事業内容

-------------------------------------------------------*/
.business-inner{
  position: relative;}

.bg-business-img{
  position: absolute;
  opacity: .2;
  top: 0;
  right: 0;
  width: 50%;
  z-index: -2;
  overflow: hidden;}
  @media screen and (min-width:768px){
  .bg-business-img{
    z-index: -1;
    text-align: right;}}

.bg-business-img img{
  width: 140%;
  max-width: none;
  margin-top: 0.6em; }
  @media screen and (min-width:768px){
    .bg-business-img img{
      width: 50%;
      margin-right: 3vw;} }


/* 主なカスタマイズ作業 -------------------------------------------------------*/
.info-box{
  position: relative;
  padding: 1em 0 1.4em;}

.info-box::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #fff;
  z-index: -1; }


/* 当社の強み -------------------------------------------------------*/
.strength-img{
  text-align: center;
  margin-right: 4vw;
  margin-left: 4vw;}

.strength-left,
.strength-right{
  margin-top: 1.5em;}
  @media screen and (min-width:768px){
    .strength-left,
    .strength-right{
      display: grid;
      grid-template-rows:auto 1fr;}}

.strength-title{
  padding-top: 4.5em;
  padding-bottom: 0.5em;
  margin-top: -4em;
  font-size: 1.2em;
  padding-right: 4vw;
  padding-left: 4vw;}
  @media screen and (min-width:768px){
    .strength-title{
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      margin-top: 0;
      padding-right: 0;
      padding-left: 1vw;
      grid-row: 1 / 2;}}

.strength-txt{
  margin-top: 0.8em;
  margin-right: 4vw;
  margin-left: 4vw;}
  @media screen and (min-width:768px){
    .strength-txt{
      grid-row: 2 / 3;
      margin-right: 1vw;
      margin-left: 1vw;}}

@media screen and (min-width:768px){
.strength-img{
  width: 260px;
  margin-right: 0;
  margin-left: 0;
  grid-row: 1 / 3;}

.strength-left{
  grid-template-columns:260px 1fr;}

.strength-left .strength-img{
	grid-column: 1 / 2;}

.strength-left .strength-title{
	grid-column: 2 / 3;}

.strength-left .strength-txt{
	grid-column: 2 / 3;}

.strength-right{
  grid-template-columns:1fr 260px;}

.strength-right .strength-img{
	grid-column: 2 / 3;}

.strength-right .strength-title{
	grid-column: 1 / 2;}

.strength-right .strength-txt{
	grid-column: 1 / 2;} }


/* カスタマイズの流れ -------------------------------------------------------*/
.flow{
  box-sizing: border-box;}

.flow + .flow{
  position: relative;
  margin-top: 2rem;}

.flow + .flow::before{
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  border-style: solid;
  border-right: 1rem solid transparent;
  border-left: 1rem solid transparent;
  border-top: 1rem solid #9E9EAF;
  border-bottom: 0;}

.flow-title{
  background: #E8E9EF;
  padding: 0.2em 0;}

.flow-box{
  background: #fff;
  padding: 1em;}

.flow-grad{
  padding: 2px;}

.flow-grad .flow-title{
  padding-top: calc(0.2em - 2px);
  padding-bottom: 0.2em;
  background: none;
  color: #fff;}

@media screen and (min-width:768px){
.img-border{
  display: inline-block;
  width: calc(50% - 0.5em);} }

.img-border + .img-border{
  border-top: 1px solid #d6d6d6;}
  @media screen and (min-width:768px){
    .img-border + .img-border{
      border-left: 1px solid #d6d6d6;
      border-top: none;} }


/* 改造車ピックアップ -------------------------------------------------------*/
.vehicle{
  margin: 1em 0.5rem 0;
  padding: 0 2.4rem;
  position: relative;}
@media screen and (min-width:768px){
  .vehicle{
    margin: 1em 0 0;
    padding: 0;}}

@media screen and (min-width:768px){
  .vehicle .Card-Item img{
    transition: .3s;}}

@media screen and (min-width:768px){
  .vehicle .Card-Item img:hover{
    opacity: 0.5;}}

/*スライダー共通設定*/
.swiper-slide {
  height: auto;
  background: #fff;
  text-align: center;}
.swiper-slide a {
  transition: .2s; }
  @media screen and (min-width:768px){
    .swiper-slide a:hover {
      opacity: 0.6; } }
.swiper-slide img{
  object-fit: cover;
  height: 100%;
  width: 100%; }

/*バナースライダー ページネーション*/
.top-slider-pagination.swiper-pagination-bullets{
  display: flex;
  padding: 1.2rem 1.7rem 0;
  /*margin-top: 274px;*/
  width: 100%!important;
  box-sizing: border-box;
  justify-content: center; }
  @media screen and (max-width:980px){
      .top-slider-pagination.swiper-pagination-bullets{
        padding: 0.8rem 1.7rem 2rem;
        background: none;} }
.top-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #C3102E;
  transform: scale(1.4);
  color: #fff;
  opacity: 1;}
.top-slider-pagination .swiper-pagination-bullet {
  border-radius: 0;
  margin: 0 8px!important;
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 1;
  transition: transform .4s;}

/*ページ送り*/
.top-slider-prev,
.top-slider-next{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #9E9EAF;
  font-size: 2.8rem;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: calc((100% - 1.2rem - 10px) / 2);
  transform: translate(0, -50%); }
  @media screen and (max-width:980px){
      .top-slider-prev,
      .top-slider-next{
        top: calc((100% - 2.8rem - 10px) / 2);} }
  @media screen and (min-width:768px){
    .top-slider-prev,
    .top-slider-next{
      color: rgba(255, 255, 255, .5);
      font-size: 9vw;
      text-shadow: 0px 0 20px rgba(0,0,0,.9); } }

.top-slider-prev{
  left: 0; }
  @media screen and (min-width:768px){
    .top-slider-prev{
  left: 3.5vw; } }

.top-slider-next{
  right: 0; }
@media screen and (min-width:768px){
    .top-slider-next{
  right: 3.5vw; } }

/*モーダルスライダー*/
.Card-Item {
  cursor: pointer;}

.ModalLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  transition: opacity 0.65s;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  overflow-y: auto;}

.ModalLayer.isShow {
  transition: opacity 0.65s;
  pointer-events: auto;
  opacity: 1;}

.ModalLayer-Mask {
  position: fixed;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;}

.Modal{
  position: fixed;
  right: 50%;
  bottom: 50%;
  width: calc(100% - 20px);
  max-width: 600px;
  max-height: calc(100% - 7rem);
  transform: translate(50%, 50%);}

.Modal-Inner {
  max-width: 600px;
  display: block;
  width: 100%;
  max-height: calc(100svh - 7rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;}

.Modal-Inner-Btn {
  position: absolute;
  top: -2rem;
  right: 0;
  height: 2rem;
  line-height: 0;
  font-size: 1.5rem;
  width: 100%;
  max-width: 600px;
  color: #fff;
  z-index: 10;
  cursor: pointer;
  text-align: right;}

.Modal-Inner-Card {
  width: 100%;
  overflow: hidden;}

.Modal-Inner-Card-Wrapper {
  display: flex;}

.Modal-Inner-Card-Wrapper-Slide {
  width: 100% !important;
  height: auto;}

.Modal-Inner-Card-Wrapper-Slide-Item {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;}

.Modal-Inner-Card-Wrapper-Slide-Item-Box {
  position: relative;
  margin-left: auto;
  margin-right: auto;}

/*モーダル内容*/
.vehicle-box{
  font-size: 90%;
  display: grid;
  grid-template-columns: 1fr 40%;
  grid-template-rows: repeat(7, auto) 1fr;
  text-align: left;}
  @media screen and (min-width:768px){
    .vehicle-box{
  font-size: 100%;
  grid-template-columns: 1fr 35%;}}

.vehicle-box dl{display: flex;}
.vehicle-box dl dt{background: #E8E9EF;
width: 6.5em;
margin: 0.1em 0.1em 0.1em 2em;
text-align: center;
white-space: nowrap;}
.vehicle-box dl dd{
  flex: 1;
  margin: 0.1em 2em 0.1em 0.5vw;}

.publication-date{
  margin-top: 1em;
  margin-left: 2em;
  grid-column: 1 / 2;}
.vehicle-type{ grid-column: 1 / 2;}
.vehicle-number{ grid-column: 1 / 2;}
.vehicle-date{ grid-column: 1 / 2;}
.vehicle-bodywork{ grid-column: 1 / 2;}
.vehicle-manufacturer{ grid-column: 1 / 3;}
.vehicle-modification{ grid-column: 1 / 3;}
.vehicle-img{ 
  grid-row: 1 / 6;
  grid-column: 2 / 3;}

.vehicle-img img{
  object-fit: fill;
  height: auto;}

.vehicle-txt{
  border-top: 1px solid #9b9b9b;
  margin:1em 2em 1em 2em;
  padding-top: 0.8em;
  grid-column: 1 / 3;}

.Modal-Inner .swiper-button-next,
.Modal-Inner .swiper-button-prev{
  color: #9E9EAF;}

.Modal-Inner .swiper-button-next:after,
.Modal-Inner  .swiper-button-prev:after{
  font-size: 1.5em;}
.Modal-Inner  .swiper-button-prev{
  left: 0;}
.Modal-Inner .swiper-button-next{
  right: 0;}


/*-------------------------------------------------------

会社情報

-------------------------------------------------------*/
/* 企業理念・行動指針 -------------------------------------------------------*/
.philosophy{
  position: relative;
  padding-bottom: 4em;}

.philosophy-box{
  background: rgba(0,0,0,.6);
  margin-top: 1.2em;}
  @media screen and (min-width:768px){
    .philosophy-box{
    margin-top: 2.5vw;} }

.philosophy-title{
  background:#fff;
  font-size: 1.2em;
  padding: 0.2em 0.8em;}
  @media screen and (min-width:768px){
    .philosophy-title{
      display: inline-block;
      position: relative;}}

@media screen and (min-width:768px){
  .philosophy-title::before{
    display: block;
    content: '';
    width: 0;
    left: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: 0 solid transparent;
    border-width: 2.0em 0.7em 0 0;
    border-top-color: #fff;}}

.philosophy-title .color-grad{
  padding-left: 1.2em;
  text-indent: -1.2em;}
    
.philosophy-txt{
  color: #fff;
  padding: 1em; }

.philosophy-background{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    -webkit-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    transform: skewY(-5deg);
    overflow: hidden;
    z-index: -1;}

.philosophy-background .philosophy-background-inner{
    -webkit-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    transform: skewY(5deg);
    width: calc(1200px + 200 * (100vw - 320px)/448);
    position: absolute;
    bottom: -20vw;
    left: -50%;}
    @media screen and (min-width:768px){
    .philosophy-background .philosophy-background-inner{
      width: 100%;
      bottom: -5vw;
      left: 0; } }

.philosophy-background-image{
    width: 100%;}

.philosophy-background-image img{
  object-fit:cover;
  width: 100%;
  height: 100%;}


/* 会社案内パンフレット -------------------------------------------------------*/
.panf-img a{
  max-width: 245px;
    display: block;
    margin: 0 auto;
    border: 1px solid #E6E6E6;
    box-shadow: 0px 7px 10px 1px rgba(0, 0, 0, .2);}

@media screen and (min-width:768px){
 .panf-img a img{
    transition: .3s;}
  .panf-img a img:hover{
    opacity: 0.5;}}


/* 会社案内動画 -------------------------------------------------------*/
.videoBox{
  position: relative;
  width: calc(100% - 8vw);
  max-width: 1024px;
  margin-right:auto;
  margin-left: auto;}
  @media screen and (in-width:768px){
    .videoBox{
      width: 100%;}}

.videoBox::before{
  content:"";
  display: block;
  padding-top: 56.25%; /* 高さを幅の56.25%に固定 */}

.video{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;}


/*-------------------------------------------------------

ニュース

-------------------------------------------------------*/
.news{
  background: #fff;
  padding: 1.5em 0 0;}

.news-list{
  margin: 0 1em;}

.news-list li a{
  text-decoration: none;
  color: #333;
  display: grid;
  grid-template-columns: 1.8em 8em 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: 1em 0;}
  @media screen and (min-width:768px){
    .news-list li a{
  grid-template-rows: auto;}
  .news-list li a:hover{
  color: #C3102E; }}

.news-list li a i{
  font-size: 1.3em;
  padding-right: 0.3em;
  color: #C3102E;
  grid-column: 1 / 2;
  grid-row:1 / 2;}
  @media screen and (min-width:768px){
    .news-list li a i{
      grid-column: 1 / 2;}}

.news-list li a time{
  padding-right: 1em;
  grid-column: 2 / 4;
  grid-row:1 / 2;}
  @media screen and (min-width:768px){
    .news-list li a time{
      grid-column: 2 / 3;}}

.news-list li a span{
  grid-column: 1 / 4;
  grid-row:2 / 3;}
  @media screen and (min-width:768px){
    .news-list li a span{
      grid-column: 3 / 4;
      grid-row:1 / 2;}}

.news-list li + li a{
  border-top: 2px solid #E6E6E6;}

.news-box{padding: 1em;}

.news-box p{margin-top: 1em;}


/*-------------------------------------------------------

採用情報

-------------------------------------------------------*/
.heading-recruit{
  padding: 17vw 0 4vw;
  color: #fff;}
  @media screen and (min-width:768px){
    .heading-recruit{
      padding: calc(85px + 25 * (100vw - 768px)/281) 0 2vw;} }
  @media screen and (min-width:1050px){
    .heading-recruit{
      padding: 8vw 0 2vw;} }

.heading-recruit .heading-sub{
  color: #fff; }

.tab-recruit{
  padding-bottom: calc(28px + 122 * (100vw - 320px)/447); }
  @media screen and (min-width:768px){
    .tab-recruit{
  padding-bottom: calc(90px + 45 * (100vw - 768px)/281); }}
  @media screen and (min-width:1050px){
    .tab-recruit{
  padding-bottom: 11vw; }}

.recruit-background-top{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    transform: skewY(-5deg);
    overflow: hidden;
    z-index: -1;}

.recruit-background-top::after{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);}

.recruit-background-top .recruit-background-inner{
    -webkit-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    transform: skewY(5deg);
    width: 100%;
    display: flex;
    margin-top: -5vw;}

.recruit-background-bottom{
    position: absolute;
    width: 100%;
    bottom: 0;
    -webkit-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    transform: skewY(-5deg);
    overflow: hidden;
    z-index: -1;}

.recruit-background-bottom::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);}

.recruit-background-bottom .recruit-background-inner{
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  width: 100%;
  display: flex;
  margin-bottom: -1vw;}

.recruit-background-image{
  width: calc(100% / 3);
  height: 46vw;}
  @media screen and (min-width:768px){
  .recruit-background-image{
      height: 33vw; } }
  @media screen and (min-width:1050px){
    .recruit-background-image{
      height: 27vw; } } 
  @media screen and (min-width:1700px){
    .recruit-background-image{
      height: 22vw; } }

.recruit-background-image img{
  object-fit:cover;
  width: 100%;
  height: 100%;}


/*-------------------------------------------------------

アクセス

-------------------------------------------------------*/
.access-map {
  width: 100%;
  height: 57vw;
  max-height: 540px; }
  @media screen and (min-width: 768px) {
    .access-map{
      height: 40vw; } }

.access-map iframe{
  width: 100%;
  height: 100%;}

/*-------------------------------------------------------

footer

-------------------------------------------------------*/      
footer{
  position: relative;
  margin-top: -2rem;
  color: #fff;
  background: #fff;
  text-align: center;}
  @media screen and (min-width:768px){
    footer{
        margin-top: -5vw;
        padding-top: 5vw;}}

.footer-box{
  background: #02003E;
  padding: 1.8em 1em;}
  @media screen and (min-width:768px){
    .footer-box{
      display: flex;
      padding: 1.8em 4vw;
      justify-content: space-between;}}

.footer-link{margin-bottom: 1em;}
  @media screen and (min-width:768px){
    .footer-link{margin-bottom: 0;}}

.footer-link a{
  color: #fff;}

@media screen and (min-width:768px){
  .history dl{ display: flex;}
  .history dt{ width: 14em;}
  .history dd{ flex:1;}}


/*-------------------------------------------------------

inview スクロールでフェードイン

-------------------------------------------------------*/
/*下からフェード*/
.inview-item {
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; }
.inview-item.inview {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); }

/*フェード*/
.fade-normal.inview-item {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); }

/*採用情報用フェード*/
.recruit-background-top.inview-item,
.recruit-background-bottom.inview-item{
    -webkit-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    transform: skewY(-5deg); }