@charset "utf-8";

html { scroll-behavior: smooth; }


/* mv */
.mv{
  position: relative;

  & .mv__txtBox{ position: absolute; max-width: 600px; width: 31.25%; z-index: 2; left: 50%; top: 50%; transform: translate(-50% , -50%); padding: 2vw; background: rgb(168 29 52 / 90%);}
  & .mv__tit{ margin-bottom: 0.2em; font-size: clamp(26px,2.6vw,55px); font-weight: 800; color: #fff; text-align: center; line-height: 1.4;}
  & .mv__subtit{  font-size: clamp( 14px , 2vw , 30px); font-weight: 500; color: #fff; text-align: center; }
  & .mv__labelItem{ flex-basis: calc((100% - 20px) / 3); margin-top: 20px;}
  & img{ width: 100%;}
}

@media (max-width: 768px){
  .mv{
    & .mv__txtBox{ max-width: 100%; width: 100%; top: 54%; transform: translate(-50% , -50%); min-height: 40.72%; padding: 5.5vw; background: rgb(168 29 52 / 90%);}
    & .mv__labelList{ max-width: 72%; margin: 0 auto}
    & .mv__labelItem{ flex-basis: calc((100% - 20px) / 3); margin-top: 20px;}
  }
}

/* feature */
.feature{
  background: url(../img/bg_feature.png) no-repeat center center/cover;
  
  & .feature__inner{ padding: clamp(50px, 5.2vw, 100px) 0 clamp( 100px , 12.5vw , 150px);}
  & .feature__lead.c-lead{  font-size: clamp(18px, 1.6vw, 20px);}
  & .feature__list{ margin-top: clamp( 80px , 8.3vw , 100px); gap: 80px;}
  & .feature__listItem{ align-items: flex-start;}
  & .feature__listItem:nth-last-of-type(even){ flex-direction: row-reverse; gap: 20px;}
  & .feature__listHead{ flex-basis: calc( 50% - 4.16%); justify-content: flex-start; gap: 20px;}
  & .feature__listNumber{ font-size: clamp( 45px , 5.3vw , 54px); font-weight: bold; letter-spacing: 0.1em; line-height: 1; color: #c59499; }
  & .feature__listTags{ justify-content: center; gap: 20px;}
  & .feature__tag{ font-size: clamp( 14px , 3vw , 16px); color: #a81d34; line-height: 1.5; font-weight: 500;}
  & .feature__list { margin-bottom: clamp( 80px , 10vw , 120px);}
  & .feature__listImg{ flex-basis: 50%;}
  & .feature__listTit{ font-weight: bold; font-size: clamp( 18px , 2.4vw , 29px); line-height: 1.8;}
  & .feature__listSubtit{ background: #a81d34; color: #fff; margin-top: 0.2em; padding: 0.2em 0.5em;}

  & .feature__lab:not(:first-of-type){ margin-top: 20px ;}
  & .feature__labList{ align-items: flex-start;}
  & .feature__labImg{ flex-basis: 54.5%;}
  & .feature__labTxtBox{ flex-basis: calc( 45.45% - 4.5%); flex-wrap: nowrap;gap: 20px;}
  & .feature__labTitBox{ justify-content: flex-start; align-items: center; gap: 20px; margin-bottom: 1em;}
  & .feature__labTitBox::before{ content: ""; display: inline-block; width: 6px; height: 4em; background: #009fb9; border-radius: 6px;}
  & .feature__labTitBox.titborder_red::before{ background: #a81d34;}
  & .feature__labTit{ margin-top: -0.2em; font-size: clamp( 26px , 2.83vw , 34px); line-height: 1.5; font-weight: bold; flex-basis: calc(100% - 26px);}
  & .feature__labSubtit{ display: block; font-size: clamp( 18px , 2vw , 24px); }
  & .feature__labDetail{ align-items: flex-start; margin-top: 50px;}
  & .feature__labDetailItem{ flex-basis: calc(( 100% - 50px)/3); gap: 20px;}
  & .feature__labDetailTit{ font-size: clamp( 18px , 1.6vw , 20px); font-weight: bold; margin: 15px 0; line-height: 1.5;}
  & .feature__detailSubtit{ font-size: clamp( 16px , 1.5vw , 18px); }
  & .feature__labDetailDesc{ font-size: 16px;}
}

@media (max-width: 768px){
  .feature{
      background: url(../img/bg_feature.png) no-repeat right center/cover;
      & .feature__listHead{ flex-basis: 100%; line-height: 1;}
      & .feature__listTit{ width: 100%; margin-top: -10px;}
      & .feature__listImg{ flex-basis: 100%; margin-top: 20px;}
      & .feature__labImg{ flex-basis: 100%;}
      & .feature__labTxtBox{ flex-basis: 100%; flex-wrap: nowrap; gap: 20px; margin-top: 20px;}
      & .feature__labDetailItem { flex-basis: 100%;}
      & .feature__labDetailItem:not(:last-of-type) { margin-bottom: 25px;}
  }
}

/* example */
.example{
  & .example__tit{ color: #fff;}
  & .example__subtit{ color: #d5a8ad;}
  & .example__list{ margin-top: clamp( 50px , 5vw , 60px); align-items: flex-start; gap: 60px;}
  & .example__listItem{ flex-basis: calc((100% - 60px) / 2); color: #fff;}
  & .example__company{ text-align: center; font-weight: bold; padding: 0.5em; font-size: clamp( 17px , 1.6vw , 20px);}

  & .example__case{ position: relative; margin-top: clamp( 50px , 5vw , 60px); padding: 3.3%; background: #fff; text-align: center;}
  & .example__case::before, .example__case::after{ content: ""; background: url(../img/deco_01.webp) no-repeat; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 194px;}
  & .example__case::after{ transform: scaleX(-1)translateY(-50%); right: 0; left: auto;}
  & .example__caseTitle{ font-size: clamp( 20px , 2.8vw , 34px); font-weight: bold;}
  & .example__caseList{ margin: 25px auto 0; max-width: 900px; justify-content: center; gap: 10px; line-height: 1;}
  & .example__caseItem{ position: relative; border: 1px solid #a81d34; color: #a81d34; padding: 0.5em 1em; border-radius: 6px;}
  & .example__caseItem::before{ content: ""; position: absolute; top: 9px; left: 6px; transform: translateY(-50%); width: 6px; height: 6px; background: #a81d34; border-radius: 50%;}
}

@media (max-width: 768px){
  .example{
  & .example__listItem{ flex-basis: 100%; }
  & .example__case{ padding: 25px 3.3%;}
  & .example__case::before, .example__case::after{ width: 2%;}
  & .example__caseItem{ font-size: 14px;}
  & .example__lead{ margin-top: 1em;}
  & .example__desc{ font-size: 14px;}
}
}

/* about */
.about{
  & .about__leadSubtit{ display: block; font-size: clamp( 25px , 3.16vw , 38px); font-weight: bold; margin-bottom: 1em;}
  & .about__map{ margin-top: 35px;}
  & .about__mapFacilityTit{ font-weight: bold; border-bottom: 1px solid #d4dbc4; padding-bottom: 0.5em; margin-bottom: 0.5em;}
  & .about__mapFacility{ padding: 3.33%; align-items: flex-start;}
  & .about__mapFacility>.js-more{ margin-top: 0;}
  & .about__mapFacilityList{ align-items: flex-start;}
  & .about__mapFacilityListBox{ align-items: flex-start; margin-bottom: 40px;}
  & .about__mapFacilityItem{  flex-basis: calc(( 100% - 38px)/3);}
  & .about__facilityTxt{ display: block; font-size: clamp( 14px , 1.3vw , 16px); line-height: 1.5; margin-bottom: 0.5em; letter-spacing: 0.08em;   }
  & .about__facilityTxtlist{ align-items: flex-start; line-height: 1.8;}
  & .about__facilitydDisttit{ width: 7em;}
  & .about__facilitydDisttxt{ width: calc(100% - 7em);}
  & .about__facilityNumber{ display: inline-block; background: #f08200; width: 1.8em; height: 1.8em; text-align: center; letter-spacing: 0;  color: #fff; line-height: 1.8; margin-right: 10px;}
  & .about__mapFacilityItem:nth-of-type(2) .about__facilityNumber{ background: #00afd5;}
  & .about__mapFacilityItem:nth-of-type(3) .about__facilityNumber{ background: #ea5d87;}
  & .about__facilitydDist{ display: inline-block; width: 18px; height: 18px; margin-right: 0.5em; background: #fddf90; vertical-align: -2px;}
  & .about__facilityTxt:nth-of-type(2) .about__facilitydDist{ background: #a2d6ca;}
  & .about__mapFacilityItem.conference .about__facilityTxt{ margin-bottom: 30px;}
  
  & .about__infoList{ margin-top: 40px; gap: 20px;}
  & .about__infoListItem{ flex-basis: calc((100% - 60px)/4);}
  & .about__graphList{ margin-top: clamp( 40px , 5vw , 60px); align-items: flex-start; gap: 20px;}
  & .about__graphTit{ background: #f6e8ea; padding: 10px 1em; margin-bottom: 30px; color: #a81d34; font-size: clamp( 20px , 2.5vw , 30px); text-align: center; }
  & .about__graphSubtit{ display: block; color: #000; font-size: 60%;}
  & .about__graphItem{ flex-basis: calc((100% - 20px)/2);}
}

@media (max-width: 768px){
  .about{
    & .about__mapFacilityItem{ flex-basis: 100%;}
    & .about__mapFacilityItem:not(:last-child){  margin-bottom: 30px;}
    & .about__infoList{ margin-top: 40px; gap: 10px;}
    & .about__infoListItem{ flex-basis: calc((100% - 10px)/2);}
    & .about__graphItem{ flex-basis: 100%;}
    & .about__graphItem:not(:last-of-type){ margin-bottom: 30px;}

    
  }
}

/* access */
.access{
  & .access__merit{ margin-top: 45px; align-items: stretch;}
  & .access__meritItem{ flex-basis: calc((100% - 35px)/2); background: #86172a; padding: clamp( 20px , 3.33vw , 40px); border-radius: 6px;}
  & .access__meritTit{ text-align: center; margin-bottom: 1em; font-size: clamp( 20px , 2vw , 24px); font-weight: bold;}
  & .access__meritDesc{ font-size: clamp( 15px , 1.3vw , 16px); line-height: 1.5; margin-bottom: clamp( 15px , 2.5vw ,30px);}
  & .access__mapBox{ margin-top: 60px; align-items: flex-start; gap: 30px;}
  & .access__googlemap{ flex-basis: 58.3%; width: 100%;}
  & .access__map{ width: 100%;}
  & .access__mapTxtBox{ flex-basis: 38.3%;}
  & .access__mapDetailItem{ margin-bottom: 30px; width: 100%;}
  & .access__mapDetailtit{ font-size: clamp( 18px , 2vw , 24px); font-weight: bold; margin-top: -0.25em;}
  & .access__mapDetailtit::before{ content:""; background: url(../img/icon_pin.svg); width: 21px; height: 27px; display: inline-block; margin-right: 15px; vertical-align: -4px;}
  & .access__mapDetailtit::after{ content: ""; display: block; width: 100%; height: 1px; background: #fff; margin: 0.5em 0;}
  & .access__bigTxt{ font-size: 160%; font-weight: bold;}
}

@media (max-width: 768px){
  .access{
    & .access__merit{ gap: 30px;}
    & .access__meritItem,.access__mapTxtBox,.access__googlemap{ flex-basis: 100%; }
    }
  }

/* flow */
.flow{
  & .flow__listBox{ margin-top: clamp( 50px , 5vw , 60px); }
  & .flow__listItem{ position: relative; border: 1px solid #a81d34; border-radius: 6px; padding: 30px 0 25px; background: #fff; margin-bottom: clamp( 30px , 3vw , 40px);}
  & .flow__listStep{ width: 100%; max-width: 370px; text-align: center; font-weight: 500;};
  & .flow__step{ position: absolute; top: -1em;  display: block; left: 116px; font-size: clamp( 18px, 2vw,  24px); background: #a81d34; color: #fff; padding: 0.2em 0.5em; border-radius: 6px; text-align: center; font-weight: bold; width: 146px;}
  & .flow__listTxt{ flex-basis: calc(100% - 400px); padding-right: 30px;}
  & .flow__listTxt::before{ position: absolute;  content: ""; display: inline-block; top: 0; left: 370px;  width: 1px; height: 100%;  background-image: linear-gradient(
    to bottom, #a81d34 50%,transparent 50%); background-size: 3px 10px; background-repeat: repeat-y; vertical-align: middle; margin-right: 20px;}
}

@media (max-width: 768px){
  .flow{
  & .flow__listStep{ max-width: 100%;}
  & .flow__listTxt{ flex-basis: 100%; padding: 20px 15px 0;}
  & .flow__listTxt::before{ display: none;}
  & .flow__step{left: 50%; transform: translateX(-50%); font-size: clamp( 18px , 2vw , 24px);}
  ;}
  
}


/* faq */
.faq{
  & .faq__list{ margin-top: clamp( 50px , 5vw , 60px); }
  & .faq__listDetails { margin-bottom: 30px; }
  & .faq__question { position: relative; justify-content: flex-start; flex-wrap: nowrap; font-size: clamp(18px, 2.3vw, 28px); font-weight: bold; color: #a81d34; padding: 30px 100px 30px 30px; background: #f4f4f4; border-radius: 6px; cursor: pointer;}
  /* JSで開閉させるため、初期状態は非表示に */
  & .faq__answer { display: none; justify-content: flex-start; padding: 30px; background-color: #fff;}
  & .faq__answerInner{ justify-content: flex-start; flex-wrap: nowrap;}
  & .faq__icon { background: #b1001c; color: white; border-radius: 50%; width: 56px; height: 56px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin-right: 0.75em; font-size: 32px; font-weight: bold; flex-shrink: 0;}
  & .icon-A { background: #565656;}

  & .faq__line { position: absolute; width: 2px; height: 100%; right: 90px; background-color: #e4e4e4; top: 0;}
  & .faq__toggleIcon { position: absolute; top: 50%; right: 30px; width: 30px; height: 30px; transform: translateY(-50%);}
  & .faq__toggleIcon::before,
  & .faq__toggleIcon::after { content: ''; position: absolute; top: 50%; left: 50%; background-color: #444; transition: transform 0.3s ease;}
  & .faq__toggleIcon::before { width: 24px; height: 4px; transform: translate(-50%, -50%); }
  & .faq__toggleIcon::after { width: 4px; height: 24px; transform: translate(-50%, -50%);/}

  /* 開いた状態（faq-openクラスが付いた時）の縦棒のスタイル*/
  & .faq-open .faq__toggleIcon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}


@media (max-width: 768px){
  .faq{
  & .faq__question{ display: block; padding: 18px 100px 15px 15px;}
  & .faq__answer { padding: 18px 30px 30px 15px;}
  & .faq__icon{ width: 30px; height: 30px; font-size: 20px; margin-bottom: 10px;}
  & .faq__answerInner{ display: block;}

  }
}

/* group */
.group{
  background: url(../img/bg_group.webp) no-repeat center center/cover;

  & .group__inner{ padding-bottom:clamp( 250px , 25vw , 300px);}
  & .group__txtBox{ flex-basis: 57.1%;}
  & .group__logoImg{ flex-basis: 39.1%;}
  & .group__tit{ font-size: clamp( 25px , 2.6vw ,32px);}
  & .group__txt{text-align: left; margin-top: 1em;}
  & .group__ecoBox{ margin-top: clamp( 40px , 5vw , 60px);}
  & .group__ecoTit{ font-size: clamp( 25px , 2.8vw , 34px); font-weight: bold; text-align: center; color: #a81d34;}
  & .group__ecoDetail{ margin-top: clamp( 30px, 4.16% , 50px); align-items: flex-start;}
  & .group__ecoDetailItem{ flex-basis: calc(( 100% - 50px)/3);}
  & .group__ecoDetailTit{ margin: 0.5em 0; text-align: center; font-size: 20px;}
}

@media (max-width: 768px){
.group{
  background: url(../img/bg_group.webp) no-repeat right center/cover;
  
  & .group__titBox{ display: block;}
  & .group__txtBox,.group__logoImg{ flex-basis: 100%;}
  & .group__logoImg{ margin-top: 20px;}
  & .group__tit{ text-align: center;}
  & .group__ecoDetailItem{ flex-basis: 100%;}
  & .group__ecoDetailItem:not(:last-child){ margin-bottom: 30px;}
  & .group__ecoDetailDesc{ font-size: 15px;}
  }
}