@charset "UTF-8";

html,
body {
  overflow-x: hidden;
}

/* --------------------------------------------------
   ファーストビュー
-------------------------------------------------- */
.hero{
  position:relative;
  height:95vh;
  max-height: 850px;
  overflow:visible;
  background:#FFFFFF;
  padding-bottom:100px;
}
@media screen and (max-width:1000px){
  .hero{
      height:100vh;
      max-height: 1000px;
  }
}
@media screen and (max-width:757px){
  .hero{
    height:90vh;
    max-height: 650px;
    padding-bottom:80px;
  }
}

.hero__slider{
  position:absolute;
  inset:0;
  pointer-events:none;
  height: 95vh;
}
@media screen and (max-width:757px){
.hero__slider{
    height:90vh;
    max-height: 650px;
  }
}

.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.9s ease;
}

.hero__slider,
.hero__slide {
  height: 100%;
}

.hero__slide.is-active{
  opacity:1;
}

.hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
@media screen and (max-width:757px){
  .hero__image{
    object-position:center;
  }
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500px; /* ←ロゴの幅＋余白 */
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 25%, rgba(0,0,0,0) 58%);
  mix-blend-mode:multiply;
}
@media screen and (max-width:757px){
  .hero__overlay{
    background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.24) 30%, rgba(0,0,0,0) 68%);
  }
}

.hero__content{
  position:relative;
  z-index:2;
  height:95vh;
  max-height: 850px;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
}
@media screen and (max-width:1000px){
  .hero__content{
      height:100vh;
      max-height: 1000px;
      padding-bottom:0px;
  }
}
@media screen and (max-width:757px){
  .hero__content{
    height:90vh;
    max-height: 650px;
    padding-bottom:30px;
  }
}

.hero__content-inner{
  width:100%;
  margin:0 auto;
  margin-left:80px;
  margin-bottom:40px;
  color:#FFFFFF;
}
@media screen and (max-width:1000px){
  .hero__content-inner{
      margin-left:30px;
  }
}
@media screen and (max-width:757px){
  .hero__content-inner{
    width:min(100% - 32px, 1280px);
    margin:0 auto 0;
  }
}

.hero__award{
  margin:0 0 10px;
  font-size:23px;
  font-weight:500;
  opacity:0.95;
  line-height: 1.2;
}
@media screen and (max-width:757px){
  .hero__award{
    margin:0 0 15px;
    font-size:15px;
  }
}

.hero__title{
  margin:0;
  font-size:45px;
  line-height:1.05;
  font-weight:500;
}
@media screen and (max-width:757px){
  .hero__title{
    font-size:30px;
  }
}

.hero__company{
  margin:5px 0 0;
  font-size:15px;
  font-weight:400;
  color: #dbdbdb;
}
@media screen and (max-width:757px){
  .hero__company{
    margin:8px 0 0;
    font-size:14px;
    line-height:1.3;
  }
}

.hero__copy{
  margin:20px 0 0;
  font-size:16px;
  font-weight:400;
}
@media screen and (max-width:757px){
  .hero__copy{
    margin:18px 0 0;
    font-size:15px;
    line-height:1.5;
  }
}

.hero__dots{
  position:absolute;
  left:50%;
  bottom:-25px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:10px;
}

.hero__dot{
  width:10px;
  height:11px;
  border-radius:50%;
  background:#F5F4F7;
}
@media screen and (max-width:757px){
  .hero__dot{
    width:5px;
    height:11px;
  }
}

.hero__dot:hover{
  transform: translateY(0px);
}

.hero__dot.is-active{
  background:#4C4C4D;
}
@media screen and (max-width:757px){
  .hero__dot.is-active{
    background:#4C4C4D;
  }
}

/* --------------------------------------------------
   What’s
-------------------------------------------------- */
.about.section {
  padding-bottom:0px;
}


.about__heading{
  margin-bottom:44px;
}
@media screen and (max-width:757px){
  .about__heading{
    margin-bottom:28px;
  }
}

.about__body{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:60px;
  margin-bottom:56px;
}
@media screen and (max-width:757px){
  .about__body{
    display:block;
    margin-bottom:36px;
  }
}

.about__text{
  flex:1;
  max-width:900px;
  margin-bottom:40px;
}
@media screen and (max-width:757px){
  .about__text{
    max-width:none;
  }
}

.about__lead{
  margin:20px 0 50px;
  font-size:30px;
  font-weight:500;
  color:#4C4C4D;
}
@media screen and (max-width:757px){
  .about__lead{
    margin:0 0 18px;
    font-size:18px;
    line-height:1.7;
  }
}

.about__paragraph{
  margin:0;
  font-size:16px;
  line-height: 2.1;
}
@media screen and (max-width:757px){
  .about__paragraph{
    font-size:15px;
  }
}

.about__mark{
  position: absolute;
  bottom:0;
  right:0;
  width:250px;
    z-index: -1;
}
@media screen and (max-width:757px){
  .about__mark{
    width:170px;
      bottom:-30px;
  }
}

.about__mark-image{
  opacity:0.22;
}
@media screen and (max-width:757px){
  .about__mark-image{
    opacity:0.18;
  }
}

.about__marquee{
  overflow:hidden;
}
@media screen and (max-width:757px){
  .about__marquee{
    overflow:hidden;
  }
}

.about__marquee-track{
  display:flex;
  width:max-content;
  gap:0px;
  animation:marquee 200s linear infinite;
}

.about__marquee-image{
  width:580px;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:0;
}
@media screen and (max-width:757px){
  .about__marquee-image{
    width:250px;
  }
}

@keyframes marquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* --------------------------------------------------
   Category
-------------------------------------------------- */
.category.section{
  background:#F5F4F7;
}
@media screen and (max-width:757px){
  .category.section{
    background:#F5F4F7;
  }
}

.category__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 32px;
  margin-top:56px;
  align-items:start;
}
@media screen and (max-width:1000px){
  .category__grid{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:32px;
  }
}

.category__column{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:stretch;
  position:relative;
  z-index:1;
}
@media screen and (max-width:757px){
  .category__column{
    gap:18px;
  }
}

.category-card{
  position:relative;
  background:#FFFFFF;
  border-radius:5px;
  box-shadow:0 6px 18px rgba(76,76,77,0.07);
  overflow:visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media screen and (max-width:757px){
  .category-card{
    border-radius:6px;
  }
}

.category-card:hover{
  transform: translateY(-3px);
}

.category-card--large{
  align-self:start;
}
@media screen and (max-width:757px){
  .category-card--large{
    align-self:auto;
  }
}

.category-card--compact{
  min-height:88px;
}
@media screen and (max-width:757px){
  .category-card--compact{
    min-height:auto;
  }
}

.category-card__button{
  position:relative;
  z-index:2;
  cursor:pointer;
  width:100%;
  padding:20px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
}
@media screen and (max-width:757px){
  .category-card__button{
    padding:20px 18px;
  }
}

.category-card__button:hover{
  transform: translateY(0px);
}

.category-card__head{
  display:flex;
  align-items:center;
  gap:20px;
}
@media screen and (max-width:757px){
  .category-card__head{
    gap:14px;
  }
}

.category-card__icon{
  width:50px;
  flex-shrink:0;
}
@media screen and (max-width:757px){
  .category-card__icon{
    width:38px;
  }
}

.category-card__title{
  font-size:20px;
  font-weight:600;
  color:#4C4C4D;
}
@media screen and (max-width:757px){
  .category-card__title{
    font-size:16px;
  }
}

.category-card__arrow{
  position:relative;
  width:18px;
  height:18px;
  flex-shrink:0;
}
@media screen and (max-width:757px){
  .category-card__arrow{
    width:16px;
    height:16px;
  }
}

.category-card__arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  border-right:2px solid #4C4C4D;
  border-bottom:2px solid #4C4C4D;
  transform:translate(-50%,-65%) rotate(45deg);
  transition:transform 0.3s ease;
}
@media screen and (max-width:757px){
  .category-card__arrow::before{
    width:10px;
    height:10px;
  }
}

.category-card.is-open .category-card__arrow::before{
  transform:translate(-50%,-25%) rotate(-135deg);
}
@media screen and (max-width:757px){
  .category-card.is-open .category-card__arrow::before{
    transform:translate(-50%,-25%) rotate(-135deg);
  }
}

.category-card__content{
  position:relative;
  z-index:1;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease, padding 0.4s ease;
  padding:0 28px;
}
@media screen and (max-width:757px){
  .category-card__content{
    padding:0 18px;
  }
}

.category-card.is-open .category-card__content{
  pointer-events:auto;
  max-height:800px;
  padding:0 28px 28px;
}
@media screen and (max-width:757px){
  .category-card.is-open .category-card__content{
    max-height:800px;
    padding:0 18px 18px;
  }
}

.category-card__text{
  margin:0;
  font-size:16px;
}
@media screen and (max-width:757px){
  .category-card__text{
    font-size:14px;
  }
}

.category-card__example{
  margin-top:22px;
  padding:24px 28px;
  background:#F5F4F7;
  border-radius:4px;
}
@media screen and (max-width:757px){
  .category-card__example{
    margin-top:18px;
    padding:18px;
  }
}

.category-card__example-title{
  margin:0 0 14px;
  font-size:16px;
  font-weight:700;
}
@media screen and (max-width:757px){
  .category-card__example-title{
    font-size:14px;
  }
}

.category-card__list{
  margin:0;
  padding-left:22px;
}
@media screen and (max-width:757px){
  .category-card__list{
    padding-left:18px;
  }
}

.category-card__list-item{
  margin-bottom:8px;
}
@media screen and (max-width:757px){
  .category-card__list-item{
    margin-bottom:6px;
  }
}


/* --------------------------------------------------
   Process
-------------------------------------------------- */
.process__point-wrap{
  margin-top:80px;
}
@media screen and (max-width:757px){
  .process__point-wrap{
    margin-top:50px;
  }
}


.process__point-lead{
  max-width:1000px;
  margin:40px 0 40px;
  font-size:16px;
  line-height:2.1;
}
@media screen and (max-width:757px){
  .process__point-lead{
    font-size:15px;
    line-height:1.9;
  }
}

.process__cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-top:40px;
  margin-bottom:100px;
}
@media screen and (max-width:757px){
  .process__cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
    margin-bottom:60px;
  }
}

.process-card{
  padding:40px;
  background:#F5F4F7;
  border-radius:5px;
  text-align:center;
  box-shadow:none;
}
@media screen and (max-width:757px){
  .process-card{
    padding:30px 18px 20px;
  }
}

.process-card__icon{
  width:70px;
  height:79px;
  margin:0 auto 18px;
}
@media screen and (max-width:757px){
  .process-card__icon{
    width:42px;
    height:auto;
    margin:0 auto 14px;
  }
}

.process-card__title{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.5;
  letter-spacing: 1px;
  text-align:center;
}
@media screen and (max-width:757px){
  .process-card__title{
    font-size:20px;
  }
}

.process-card__line{
  width:100%;
  height:0.5px;
  margin:18px 0 25px;
  background:#4c4c4d52;
}
@media screen and (max-width:757px){
  .process-card__line{
    margin:14px 0 16px;
  }
}

.process-card__list{
  width:fit-content;
  margin:0 auto;
  padding:0;
  list-style:none;
  text-align:left;
}
@media screen and (max-width:757px){
  .process-card__list{
    width:fit-content;
  }
}

.process-card__item{
  position:relative;
  margin-bottom:10px;
  padding-left:40px;
  font-size:16px;
  line-height:1.8;
}
@media screen and (max-width:757px){
  .process-card__item{
    margin-bottom:3px;
    padding-left:26px;
    font-size:15px;
  }
}

.process-card__item:last-child{
  margin-bottom:0;
}
@media screen and (max-width:757px){
  .process-card__item:last-child{
    margin-bottom:0;
  }
}

.process-card__item::before{
  content:"";
  position:absolute;
  top:2px;
  left:0;
  width:29px;
  height:29px;
  background:url("../img/top/check.png") no-repeat center center / contain;
}
@media screen and (max-width:757px){
  .process-card__item::before{
    top:4px;
    width:20px;
    height:20px;
  }
}

.timeline{
  margin-top:72px;
}
@media screen and (max-width:757px){
  .timeline{
    margin-top:52px;
  }
}

.timeline__title{
  margin:0 0 10px;
  font-size:26px;
  font-weight:700;
}
@media screen and (max-width:757px){
  .timeline__title{
    font-size:22px;
  }
}

.timeline__lead{
  max-width:1000px;
  margin:40px 0 40px;
}
@media screen and (max-width:757px){
  .timeline__lead{
    margin:0 0 28px;
    font-size:15px;
  }
}

.timeline__list{
  position:relative;
}
@media screen and (max-width:757px){
  .timeline__list{
    position:relative;
  }
}

.timeline__list::before{
  content:"";
  position:absolute;
  top:0;
  left:36px;
  width:2px;
  height:80%;
  background:#013D8C;
}
@media screen and (max-width:757px){
  .timeline__list::before{
    left:25px;
      height:75%;
  }
}

.timeline__item{
  position:relative;
  display:flex;
  gap:34px;
  padding-bottom:54px;
}
@media screen and (max-width:757px){
  .timeline__item{
    gap:15px;
    padding-bottom:36px;
  }
}

.timeline__item:last-child{
  padding-bottom:0;
}
@media screen and (max-width:757px){
  .timeline__item:last-child{
    padding-bottom:0;
  }
}

.timeline__number{
  position:relative;
  z-index:1;
  width:75px;
  height:75px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#013D8C;
  color:#FFFFFF;
  font-size:31px;
  letter-spacing: 2px;
  font-weight:500;
  padding-bottom: 5px;
  padding-left: 3px;
  flex-shrink:0;
}
@media screen and (max-width:757px){
  .timeline__number{
    width:50px;
    height:50px;
    font-size:20px;
    flex-shrink:0;
    padding-bottom: 0px;
  }
}

.timeline__body{
  padding-top:2px;
}
@media screen and (max-width:757px){
  .timeline__body{
    padding-top:0;
  }
}

.timeline__head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
  padding-top: 5px;
}
@media screen and (max-width:757px){
  .timeline__head{
    display:block;
    margin-bottom:10px;
  }
}

.timeline__item-title{
  margin:0;
  font-size:25px;
  font-weight:700;
}
@media screen and (max-width:757px){
  .timeline__item-title{
        display:inline-block;
    font-size:20px;
  }
}

.timeline__date{
  margin:0;
  padding:0px 30px;
  border-radius:6px;
  background:#F5F4F7;
  font-size:16px;
  font-weight:500;
}
@media screen and (max-width:757px){
  .timeline__date{
    display:inline-block;
    margin-top:6px;
    margin-left:10px;
    font-size:14px;
    padding:0px 20px;
  }
}

.timeline__text{
  max-width:640px;
  margin:0;
}
@media screen and (max-width:757px){
  .timeline__text{
    font-size:14px;
  }
}

/* --------------------------------------------------
   Message
-------------------------------------------------- */
.message{
  background:#F1EEF4;
}
@media screen and (max-width:757px){
  .message{
    background:#F1EEF4;
  }
}

.message__box{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:50px;
  align-items:top;
  margin-top:80px;
}
@media screen and (max-width:757px){
  .message__box{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:28px;
  }
}

.message__photo{
  width:100%;
}
@media screen and (max-width:757px){
  .message__photo{
    width:200px;
    margin: 0 auto;
  }
}

.message__image{
  object-fit:cover;
    border-radius: 5px;
}


.message__position{
  margin:0 0 4px;
  font-size:15px;
  font-weight: 700;
  line-height: 1.9;
}
@media screen and (max-width:757px){
  .message__position{
    font-size:14px;
  }
}

.message__name{
  margin:0 0 12px;
  font-size:30px;
  font-weight:700;
  letter-spacing: 1px;
  color:#013D8C;
}
@media screen and (max-width:757px){
  .message__name{
    font-size:25px;
  }
}

.message__text{
  margin:18px 0 0;
  font-size: 16px;
}
@media screen and (max-width:757px){
  .message__text{
    margin:14px 0 0;
    font-size:14px;
  }
}


/* --------------------------------------------------
   Entry
-------------------------------------------------- */
.entry{
  background:#013D8C;
}
@media screen and (max-width:757px){
  .entry{
    background:#013D8C;
  }
}

.entry__box{
  margin-top:80px;
  padding:20px 20px;
  background:#FFFFFF;
  color:#4C4C4D;
  font-size:18px;
  text-align:center;
  letter-spacing: 1px;
}
@media screen and (max-width:757px){
  .entry__box{
    margin-top:50px;
    padding:18px 14px;
    font-size:15px;
  }
}