@charset "utf-8";

/* =======================================
	common
========================================== */
#top main{
  overflow:initial
}

@media screen and (max-width: 768px) {
#top main{
  overflow:hidden
}
}

/* =======================================
	#topMv
========================================== */

#topMv{
  position: relative;
  margin-bottom: 118px;
  padding-top: 0
}

.mvSlider{
margin-right: -20%;
}
.mvSlider li{
 
}
.mvSlider li div{
padding-left: 28vw
  
}
.mvSlider li:nth-of-type(2n-1) div{
  padding-top: 80px
}
.mvSlider li div img{
  border-radius: 50px;
   aspect-ratio: 425 / 316;
width: 100%
}


.mvContent{
  position: absolute;
}

.mvContent h1{
  margin-bottom: 1rem;
 
}
.mvContent p{
  line-height: 1.8
}

.mvSubtitle{
  font-size: var(--font-26);
  font-weight: 600;
  margin-bottom: 1em
}


@media screen and (min-width: 769px) {
.mvContent{
  top:150px;
  left:193px
}
.mvContent h1{
   width: min(45.3% , 635px)
  }
}


@media screen and (max-width: 768px) {
  #topMv{
    margin-bottom: 50px
  }
  .mvContent{
    width: 94%;
    margin: auto;
    position: relative
  }
}


/* =======================================
	#topMessage
========================================== */

#topMessage{
  padding-top: 1rem;
  background: var(--LGraygrd);
  position: relative;
  padding-bottom: 100px
}
#topMessage::before{
  position: absolute;
  width: 84.92vw;
  height: 123vw;
  background: url("../img/top_message_bg.png");
  background-size: contain;
  bottom: 0;
  right: -9.5vw;
  content: ''
}

#topMessage .pcFlex{
  width: 75.71vw;
  max-width: 1060px;
  gap:9.6%;
  margin: 0 auto 100px;
}

#topMessage .pcFlex figure{
  width: 48.1%;
  flex-shrink: 0
}

#topMessage .pcFlex .msgContent h2{
  font-size: var(--font-32);
  line-height: 1.56;
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 500
}

#topMessage .pcFlex .msgContent p{
  font-size: var(--font-14);
  line-height: 2.1;
  margin-bottom: 2em
}

#topMessage .msgCard{
  gap:2rem
}

#topMessage .msgCard li{
  border-radius: 10px;
  background: var(--wh);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  flex-direction: column;
  
}

#topMessage .msgCard li dl{
  padding: 1.75rem
}
#topMessage .msgCard li dt{
   text-align: center;
}
#topMessage .msgCard li dd{
  font-size: var(--font-26);
  font-weight: 600;
letter-spacing: .05em;
  text-align: center;
}
#topMessage .msgCard li dd span{
  color: var(--red)
}



@media screen and (max-width: 768px) {
  #topMessage{
    padding-bottom: 50px;
  }
  #topMessage .pcFlex{
    width: 100%
  }
 #topMessage .pcFlex figure {
  width: 100%;
  }
  #topMessage .pcFlex .msgContent h2{
    margin-top: 1em;
    font-size: var(--font-26)
  }
  #topMessage .msgCard{
    flex-direction: column
  }
}

/* =======================================
	#service
========================================== */

#service{
  background: var(--RedOrangegrd);
  color: var(--wh);
  position: relative;
}

#service .sectionHead .lead{
  font-size: var(--font-18);
  
}
#service .serviceContent{
position: relative;

}
#service .serviceItem{
  background: var(--RedOrangegrd);
 z-index: 1;
   box-shadow: 0 0 0 1px transparent; /* Safari sticky バグ対策 */
}
.serviceItem:nth-child(1) { z-index: 4; }
.serviceItem:nth-child(2) { z-index: 3; }
.serviceItem:nth-child(3) { z-index: 2; }
.serviceItem:nth-child(4) { z-index: 1; }

#service .serviceItem .flex{
  gap:2.8rem;
  justify-content: flex-start;
}
#service .serviceItem figure{
  width: 68.4vw;
  
}
#service .serviceTxt{
  width: min(23vw , 323px);
  margin-top: 3.13rem;
}
#service .serviceTxt h3{
  margin-bottom: .5em
}

#service .serviceTxt p{
  font-size: var(--font-14);
  line-height: 1.7;
  margin-bottom: 1.5em
}
#service .serviceTxt ul{
  margin-bottom: 2.5rem;
}
#service .serviceTxt ul li{
  background:rgba(243,243,243,.2);
  border-radius: 20px;
  margin-bottom: .6em;
  padding: .2em;
  text-align: center;
}


@media screen and (min-width: 769px) {
  #service{
  padding-top: 168px;
  }
  #service .serviceItem{
  position: sticky;
  top: 340px;
  padding-bottom: 6rem;  
  }
  #service .sectionHead{
position: sticky;
  top: 180px;
}
  #service .serviceItem.last{
  background: url("../img/top_organization_bg.png") no-repeat;
  background-size: 100%;
  height: 100vh;
  width: 100vw;
  
}
}
@media screen and (max-width: 768px) {
  #service{
    padding-top: 60px;
  }
  #service .sectionHead,
  #service .serviceItem{
    position: relative;
  }
  #service .serviceItem{
    padding-bottom: 3rem;
  }
  #service .serviceItem .flex{
    flex-direction: column;
    gap: 1.2rem;
  }
  #service .serviceItem{
    width: 92%;
    margin: auto
  }
  #service .serviceItem figure{
    width: 100%;
  }
  #service .serviceTxt {
  width: 100%;
  margin-top: 0;
}
  #service .serviceItem.last{
    width: 100%;
    padding-bottom: 0
  }

}
/* =======================================
	#organizations
========================================== */

#organizations{
  padding-bottom: 30px
}
#organizations .organizationsContent ul{
  gap:2.325rem 1.625rem;
  flex-wrap: wrap;
}
#organizations .organizationsContent li{
  border-radius: 10px;
  background: var(--wh);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  width: calc(50% - 1rem)
}
#organizations .organizationsContent li .txts{
  padding: 2.125rem
}
#organizations .organizationsContent li h3{
  font-size: var(--font-22);
  font-weight: 500;
  margin-bottom: 1em
}
#organizations .organizationsContent li dd{
  width: 14rem;
  margin-left: 1.4rem
}
@media screen and (max-width: 768px) {
  #organizations {
  padding-bottom: 0;
}
  #organizations .organizationsContent li{
    width: 100%;
    margin-bottom: 2rem
  }
  #organizations .organizationsContent li .txts dt{
    margin-bottom: 1rem;
  }
  #organizations .organizationsContent li .txts {
  padding: 1.2rem;
}
  #organizations .organizationsContent li dd{
  margin-left: 0;
    text-align: center;
    display: block;
    width: 100%;
  }
}


/* =======================================
	#download
========================================== */
#download{
  padding-bottom: 50px
}
#download .inner{
  background: var(--RedOrangegrd);
  color: var(--wh);border-radius: 10px
}

#download .downloadTxt{
  padding: 4rem 5rem
}

#download .btnWrap{
  margin-top: 2rem
}
#download .btnWrap li{
   margin-bottom: 1.2rem
}
#download .btnWrap li a{
  width: 100% !important;
 
}
@media screen and (max-width: 768px) {
  #download {
  padding-bottom: 0;
}
#download .downloadTxt {
  padding: 2rem 2rem;
}
  #download .btn{
    justify-content: flex-start;
    padding-left: 1rem
  }
}

/* =======================================
	#integrity
========================================== */
#integrity{

}
#integrity .pcFlex{
  gap:5.6rem;
  width: 84.3%;
  max-width: 1180px !important
}
#integrity .pcFlex figure{
  width: 38vw;
  flex-shrink: 0
}

.integrityContent p{
  line-height: 1.75;
  margin-bottom: 2.625rem
}
.integrityContent dl{
  margin-bottom: 2rem
}
.integrityContent dt{
  font-weight: 700
}

.integrityContent dd{
  margin-bottom: 1em
}

@media screen and (max-width: 768px) {
  #integrity .pcFlex{
    width: 92%;
  }
  #integrity .pcFlex figure{
    width: 100%;
    margin-bottom: 3rem;
  }

  #top  #integrity .h3Tit{
    font-size: var(--font-26);
  }
}
/* =======================================
	#topics & #blog
========================================== */
#topics .sectionHead.flex,
#blog .sectionHead.flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end
    
}
#topics .sectionHead.flex .linkWrap,
#blog .sectionHead.flex .linkWrap{
  margin-right: 1.5rem;
}
#topics .sectionHead.flex .txtLink,
#blog .sectionHead.flex .txtLink{
  position: relative;
  padding-right: 40px
}

.txtLink::after {
  content: "";
  display: block;
  position: absolute;
  right: 5px;
  top: calc(50% - 3px);
  background: var(--red);
  height: calc(tan(60deg) * 10px / 2);
  width: 9px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.txtLink::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--red);
}

@media screen and (max-width: 768px) {
  #blog{
    padding-bottom: 0
  }
  #topics .sectionHead.flex, #blog .sectionHead.flex{
    flex-direction: column;
    align-items: flex-start;
  }
   #topics .sectionHead.flex .h2Tit, 
  #blog .sectionHead.flex .h2Tit{
  margin-bottom: .5rem;
}
  
  #topics .sectionHead.flex .linkWrap, 
  #blog .sectionHead.flex .linkWrap{
    text-align: right:
  }
}

/* =======================================
	#topics
========================================== */
#topics{

}

.topicsContent li{
  border-bottom: 1px solid var(--bgray);
  padding-bottom: 1.2em;
  padding-left: 2em;
  margin-bottom: 2.4em
}
.topicsContent li .date{
  display: inline-block
}

.topicsContent li a{
  display: flex;
  align-items: center;
  gap:5em
}


.topicsContent li .category {
  border-radius: 5px;
  display: inline-block;
  color: var(--wh) !important;
  text-align: center;
  margin-right: 1.19rem;
  min-height: 1.32rem;
  width: 7.19rem;
}

.topicsContent li .taxi {
  background: var(--red) !important;
}
.topicsContent li .news{
	background: var(--Dgray) !important;
}
.topicsContent li .bus{
	background: var(--orange) !important;
}

@media screen and (max-width: 768px) {
  .topicsContent li a{
    flex-direction: column;
    gap:.5rem;
      align-items: flex-start;
  }
  .topicsContent li{
    padding-left: 0
  }
}
/* =======================================
	#blog
========================================== */
#blog{
  padding-bottom: 50px
}

#blog .blogContent ul{
  gap:1.75rem
}


#blog .blogContent li{
  border-radius: 10px;
background: var(--wh);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
  width: calc(50% - 0.875rem)
}


#blog .blogContent li .img{
  overflow: hidden;
  aspect-ratio: 609 / 334;
  background: var(--Lgray);
  display: flex;
  align-items: center;
  justify-content: center;
}
#blog .blogContent li .img img{
  height: 100%;
  width: auto;
  object-fit: cover;
  max-width: initial;
}

#blog .blogContent li .category {
  background: var(--red) !important;
  color: var(--wh) !important;
  display: inline-block;
  padding: 0.05rem 0.3rem;
  text-align: center;
  font-size: var(--font-12)
}

#blog .blogContent li .txts{
  padding: 1.75rem 1.25rem;
}

#blog .blogContent li .txts .date{
  font-size: var(--font-14)
}
  @media screen and (max-width: 768px) {
    #blog .blogContent li{
      width: 100%;
      margin-bottom: 2rem
    }
  }

/* =======================================
	#recruit
========================================== */
#recruit{

}
#recruit .inner{
  border-radius: 10px;
  background: var(--wh);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  align-items: center;
  gap:4rem
}

#recruit .inner figure{
  width: 56.5%;
  flex-shrink: 0;
  
}
#recruit .inner figure img{
  aspect-ratio:360 / 167;
  width: 100%
}

#recruit .inner .recruitContent p.btnWrap{
  margin-top: 2em
}

  @media screen and (max-width: 768px) {
    #recruit .inner figure{
      width: 100%;
    }
    #recruit .inner .recruitContent{
      padding: 1rem
    }
}