body.top {
  background: url(../images/top/bg_hero.jpg) no-repeat center top;
}

body.top .header {
  background-color: transparent;
}

/* **************************************************************
 hero
*************************************************************** */
.f-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(100% - 100px);
  min-height: 750px;
  margin: 0 auto;
}

.f-img {
  position: relative;
  border-radius: var(--radius-max);
  overflow: clip;
}

.f-img.img-01 {
  margin-top: 135px;
  width: 29.61%;
  padding-top: calc(29.61% * 412 / 545);
}

.f-img.img-02 {
  width: 19.67%;
  padding-top: calc(19.67% * 362 / 362);
}

.f-img.img-03 {
  margin-top: 80px;
  width: 44%;
  padding-top: calc(44% * 740 / 810);
}

.f-img img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-catch {
  width: 100%;
  max-width: 1170px;
  margin: -170px auto 0;
}

.f-catch .title {
  line-height: 1.5;
  font-size: 7rem;
  font-size: clamp(6rem, 3.64vw, 7rem);
  letter-spacing: 0.15em;
  color: #333333;
}

.hero-illust {
  position: absolute;
  left: 60%;
  bottom: -200px;
}


/* **************************************************************
 about
*************************************************************** */
.f-about {
  overflow-x: clip;
}

.f-about .column-container {
  position: relative;
  align-items: flex-end;
  margin: 0 0 100px;
}

.f-about .text-content {
  font-size: 2.2rem;
}

.f-about__list .item a {
  position: relative;
  display: block;
  padding-bottom: 10px;

}

.f-about__list .item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
  transition: all 0.2s ease-in-out;
}

.f-about__list .item a:hover::after {
  scale: 1.5;
}

.f-about__list .item:nth-child(1) a:hover {
  color: #f0874e;
}

.f-about__list .item:nth-child(1) a::after {
  background-color: #f0874e;
}

.f-about__list .item:nth-child(2) a:hover {
  color: #c4474a;
}

.f-about__list .item:nth-child(2) a::after {
  background-color: #c4474a;
}

.f-about__list .item:nth-child(3) a:hover {
  color: #189e67;
}

.f-about__list .item:nth-child(3) a::after {
  background-color: #189e67;
}

.f-about__list .item:nth-child(4) a:hover {
  color: #187d9e;
}

.f-about__list .item:nth-child(4) a::after {
  background-color: #187d9e;
}

.f-about__list .item .img {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 335 / 335);
  border-radius: var(--radius-max);
  overflow: clip;
}

.f-about__list .item .img img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  transition: var(--transition-primary);
}

.f-about__list .item a:hover {
  opacity: 1;
}

.f-about__list .item a:hover .img img {
  scale: 1.2;
}


/* **************************************************************
 topics
*************************************************************** */
.f-topics__container {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}


.f-topics__container .column-title {
  width: 30%;
  min-width: 240px;
}

.f-topics__container .column-title .tabs-nav {
  flex-direction: column;
  align-items: flex-start;
  background-color: transparent;
  margin-top: 80px;
}

.f-topics__container .column-title .tab {
  min-width: fit-content;
  padding: 7px 20px;
  background-color: transparent;
  border: none;
  text-align: left;
}

.f-topics__container .column-title .tab:hover {
  background-color: var(--color-primary-light2);
  color: var(--color-primary);
}

.f-topics__container .column-title .tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0;
}

.f-topics__container .column-title .tab.active::before {
  opacity: 1;
}

.f-topics__container .column-content {
  width: 69.23%;
  margin: 0;
}

.f-topics__container .container-btns {
  justify-content: flex-end;
}


/*news*/
.difi-topics-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 0;
  border-top: 2px dotted #ccc;
}

.difi-topics-box:last-child {
  border-bottom: 2px dotted #ccc;
}

.difi-topics-team {
  display: flex;
  gap: 10px;
}

.difi-topics-team .tag-category {
  min-width: 85px;
}

.difi-topics-team .day {
  font-size: 90%;
}

.difi-topics-desc {
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*blog*/
.f-blog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 50px 25px;
}

.f-blog__list .inner {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
}

.f-blog__list .thumb {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 155 / 250);
  border-radius: var(--radius-mid);
  overflow: clip;
}

.f-blog__list .thumb img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-blog__list .day {
  line-height: 1;
}

.f-blog__list .title {
  line-height: 1.3;
}

/* **************************************************************
 space
*************************************************************** */
.f-space {
  position: relative;
  padding-top: 100px;
}

.f-space::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50%;
  width: 95%;
  max-width: 1500px;
  height: 80px;
  background: url(../images/top/acc_space_top.jpg) no-repeat center top / contain;
}

.f-space__btns {
  display: flex;
  gap: 30px;
  margin: 30px 0;
}

.f-space__btns .btn-mid {
  width: 50%;
  background: var(--tex-primary-light);
  border: none;
  text-align: center;
}

.f-space__btns .btn-mid .text {
  display: block;
  width: 100%;
}

/*calendar*/
.f-space__calendar {
  padding: 40px;
  background: var(--tex-primary-light);
  border-radius: var(--radius-max);
}

.f-space__calendar .container-btns {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 2.2rem;
}

.calendar-short p {
  display: none;
}

.calendar-short>table>tbody {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.calendar-short table tbody tr table {
  border-spacing: 2px;
}

.calendar-short table tbody tr table tbody tr td {
  width: 42px !important;
  height: 30px !important;
  font-size: 1.6rem !important;
  background-color: transparent;
}


/* **************************************************************
 service
*************************************************************** */
.f-service {
  position: relative;
  background: url(../images/tex_primary-light.jpg) repeat center;
}

.f-service::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/bg_service.jpg) no-repeat top;
}

.f-service__list {
  position: relative;
  z-index: 1;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 30.66%);
  gap: 60px 0;
  margin-top: 30px;
}

.f-service__list .item:hover {
  opacity: 1;
}

.f-service__list .img {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 460 / 460);
  border-radius: var(--radius-max);
  overflow: clip;
}

.f-service__list .img>img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-primary);
}

.f-service__list .item:hover .img>img {
  scale: 1.2;
}

.f-service__list .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 140px;
  height: 140px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-max);
}

.f-service__list .title {
  display: flex;
  align-items: center;
  max-width: fit-content;
  gap: 20px;
  margin: 25px 0;
  font-size: 3rem;
  letter-spacing: 0;
}

.f-service__list .content p {
  color: var(--text-primary);
}

.f-service__list .content p .min {
  font-size: 80%;
}


/* **************************************************************
 consult
*************************************************************** */
.f-consult {
  background: url(../images/top/bg_consult.jpg) no-repeat right 15% top 20%;
}

.f-consult .column-container {
  margin: 0;
}

.f-consult .column-content {
  position: relative;
  width: 40%;
  padding-top: 200px;
}

.f-consult .column-content::before {
  content: "";
  position: absolute;
  right: 0;
  top: 30px;
  width: 250px;
  height: 204px;
  background: url(../images/top/icon_consult.png) no-repeat center / contain;
}

.f-consult .column-content .btn-max {
  width: 100%;
  margin-bottom: 25px;
  white-space: nowrap;
}


/* **************************************************************
 banner
*************************************************************** */
.f-banners {
  margin-bottom: 100px;
}

.f-banners__list {
  width: calc(100% - 200px);
  margin: 50px auto;
  gap: 2.93%;
}

.f-banner__box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: var(--radius-max);
}

.f-banner__box .icon {
  flex-shrink: 0;
}

.f-banner__box .content .title-min {
  margin-bottom: 10px;
}

.f-banner__box .content p {
  font-size: 1.6rem;
}

.f-banner__box .content .link-arrow {
  margin-top: 10px;
}



/* **************************************************************
 recruit
*************************************************************** */
.f-recruit__container {
  position: relative;
  width: calc(100% - 200px);
  margin: 50px auto;
  padding: 100px 0;
  background: var(--tex-primary);
  border-radius: 80px;
  overflow: clip;
  color: #fff;
}

.f-recruit__container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/bg_recruit.jpg) no-repeat right center / contain;
}

.f-recruit__container .content {
  position: relative;
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
  z-index: 1;
}

.f-recruit__container .title-max .sub {
  color: #ffca3b;
}

.f-recruit__container .title-mid {
  line-height: 1.7;
  text-shadow: 0 0 10px var(--color-primary),
    0 0 15px var(--color-primary);
  white-space: nowrap;
}

.f-recruit__container .title-mid .line {
  position: relative;
}

.f-recruit__container .title-mid .line::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  translate: -50%;
  width: calc(100% - 1em);
  height: 4px;
  border-bottom: 4px dotted #ffca3b;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


---  print 印刷用CSS


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media print {}





/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 1670px / Note PC


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 1670px) {

  /* **************************************************************
 banners
*************************************************************** */
  .f-banners__list {
    width: 95%;
  }

  /* **************************************************************
   recruit
  *************************************************************** */
  .f-recruit__container {
    width: 95%;
  }

}




/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 1440px / Note PC


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 1440px) {


  .hero-illust {
    bottom: -100px;
  }

  /* **************************************************************
 about
*************************************************************** */

  .f-about .column-container {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }

  /* **************************************************************
   space
  *************************************************************** */
  .f-space .container {
    width: 90%;
  }

  /* **************************************************************
   topics
  *************************************************************** */
  .f-topics .container {
    width: 80%;
  }

  /* **************************************************************
   seervice
  *************************************************************** */
  .f-service .container-max {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* **************************************************************
   consult
  *************************************************************** */
  .f-consult .container {
    width: 80%;
  }

  /* **************************************************************
   banners
  *************************************************************** */
  .f-banner__box {
    flex-direction: column;
    justify-content: flex-start;
  }

}







/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


---  1199px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 1199px) {

  /* **************************************************************
 hero
*************************************************************** */
  .f-hero {
    width: 95%;
  }

  .f-catch {
    width: 95%;
    margin: -100px auto 0;
  }

  /* **************************************************************
   about
  *************************************************************** */

  /* **************************************************************
 topics
*************************************************************** */
  .f-topics .container {
    width: 90%;
  }

  /* **************************************************************
   service
  *************************************************************** */
  .f-service__list {
    grid-template-columns: 1fr 1fr;
    gap: 60px 40px;
  }

  /* **************************************************************
   consult
  *************************************************************** */
  .f-consult .container {
    width: 90%;
  }

  .f-consult .column-content .btn-max {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* **************************************************************
   banners
  *************************************************************** */
  .f-banner__box {
    gap: 15px 25px;
    padding: 20px;
  }

  .f-banner__box .title-min {
    text-align: center;
  }

  .f-banner__box .link-arrow {
    margin-left: auto;
    margin-right: auto;
  }

  /* **************************************************************
   recruit
  *************************************************************** */
  .f-recruit__container::before {
    opacity: 0.3;
  }

  .f-recruit__container .content {
    width: 70%;
  }


}






/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 991px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 991px) {

  body.top {
    background-size: auto 850px;
  }

  /* **************************************************************
   hero
  *************************************************************** */
  .f-hero {
    display: grid;
    justify-content: center;
    grid-template-columns: 33% 63%;
    min-height: inherit;
    gap: 20px;
  }

  .f-img {
    border-radius: 20px;
  }

  .f-img.img-01 {
    order: 1;
    width: 100%;
    /* height: 100%; */
    padding-top: calc(100% * 412 / 545);
    margin-top: 0;
  }

  .f-img.img-02 {
    order: 3;
    width: 70%;
    /* height: 100%; */
    padding-top: calc(70% * 362 / 362);
    margin-top: -60px;
  }

  .f-img.img-03 {
    order: 2;
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    width: 100%;
    padding-top: 0;
    padding-top: 100%;
    margin-top: 0;
  }

  .f-catch {
    order: 4;
    grid-column: 1 / 3;
    width: 98%;
    margin: 25px auto 0;
  }

  /* **************************************************************
   about
  *************************************************************** */

  /* **************************************************************
   space
  *************************************************************** */
  .calendar-short>table>tbody {
    flex-direction: column;
  }

  /* **************************************************************
   toppics
  *************************************************************** */
  .f-topics__container {
    flex-direction: column;
    gap: 25px;
  }

  .f-topics__container .column-title {
    width: 100%;
  }

  .f-topics__container .column-title .tabs-nav {
    margin-top: 0;
    flex-direction: row;
  }

  .f-topics__container .column-content {
    width: 100%;
  }

  /* **************************************************************
   consult
  *************************************************************** */
  .f-consult {
    background-position: 40vw -10vh;
  }

  .f-consult .column-container {
    flex-direction: column;
  }

  .column-container .column-title {
    max-width: 100%;
  }

  .f-consult .column-content {
    display: flex;
    width: 100%;
    padding-top: 0;
    gap: 25px;
  }

  .f-consult .column-content::before {
    display: none;
  }

  /* **************************************************************
   banners
  *************************************************************** */
  .f-banners__list {
    grid-template-columns: 1fr;
  }

  .f-banner__box {
    flex-direction: row;
  }

  .f-banner__box .title-min {
    text-align: left;
  }

  .f-banner__box .link-arrow {
    margin-left: 0;
  }

  /* **************************************************************
   recruit
  *************************************************************** */
  .f-recruit__container::before {
    background-size: cover;
    background-position: left;
  }


}







/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 767px(スマホ、iPad縦以下)


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 767px) {

  /* **************************************************************
 hero
*************************************************************** */
  .f-catch .title {
    font-size: clamp(3.6rem, 8.91vw, 6rem);
  }

  /* **************************************************************
   about
  *************************************************************** */
  .f-about .text-content {
    font-size: 1.8rem;
  }

  /* **************************************************************
   space
  *************************************************************** */
  .f-space__btns {
    flex-direction: column;
    gap: 15px;
  }

  .f-space__btns .btn-mid {
    width: 100%;
  }

  /* **************************************************************
   topics
  *************************************************************** */
  .f-topics__container .column-title .tab {
    width: fit-content;
  }

  .difi-topics-box {
    padding: 20px 0;
  }

  .f-blog__list {
    grid-template-columns: repeat(auto-fill, calc(50% - 15px));
    gap: 25px;
  }

  /* **************************************************************
   service
  *************************************************************** */
  .f-service__list {
    grid-template-columns: 1fr;
  }

  /* **************************************************************
   consult
  *************************************************************** */
  .f-consult .column-content {
    flex-direction: column;
    gap: 0;
  }

  /* **************************************************************
   recruit
  *************************************************************** */

  .f-recruit__container {
    padding: 60px 0;
    border-radius: 40px;
  }

  .f-recruit__container::before {
    background-position: 50% top;
  }

  .f-recruit__container .content {
    width: 80%;
  }

  .f-recruit__container .title-mid {
    white-space: normal;
  }


}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 560px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 560px) {

  /* **************************************************************
 hero
*************************************************************** */
  .f-hero {
    gap: 10px;
  }

  .f-img.img-01 {
    order: 3;
  }

  .f-img.img-02 {
    order: 2;
    margin-top: 0;
    margin-left: auto;
    border-radius: 12px;
  }

  .f-img.img-03 {
    order: 3;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    padding-top: calc(100% * 650 / 800);
  }

  .f-catch {
    margin: 40px auto 0;
  }

  .hero-illust {
    left: -20px;
    bottom: 25%;
    width: 50%;
    z-index: 1;
  }

  /* **************************************************************
   about
  *************************************************************** */
  .f-about {
    margin-top: 30px;
  }

  .f-about .text-content {
    font-size: 1.6rem;
  }

  .f-about .column-btns {
    margin: 0 auto 25px;
  }

  .f-about__list .item a::after {
    bottom: 15px;
  }

  .f-about__list .item .title-col {
    font-size: 1.6rem;
  }


  /* **************************************************************
   space
  *************************************************************** */
  .f-space {
    padding-top: 50px;
  }

  .f-space::before {
    background-image: url(../images/top/acc_space_top_sp.jpg);
  }

  .f-space__calendar {
    padding: 30px 20px;
  }

  .f-space__calendar .container-btns {
    font-size: 1.8rem;
  }

  /* **************************************************************
   topics
  *************************************************************** */
  .f-blog__list {
    grid-template-columns: repeat(auto-fill, calc(50% - 8px));
    gap: 15px;
  }

  .f-blog__list .inner {
    font-size: 1.4rem;
  }

  .f-topics__container .column-title .tab:hover {
    background-color: transparent;
  }

  .difi-topics-team .tag-category {
    min-width: 65px;
    font-size: 1.4rem;
  }

  /* **************************************************************
   service
  *************************************************************** */
  .f-service::before {
    height: 20%;
    background-size: auto 100%;
  }

  .f-service__list .title {
    font-size: 2.6rem;
  }

  /* **************************************************************
   consult
  *************************************************************** */
  .f-consult {
    background-position: center 200%;
  }

  /* **************************************************************
   banners
  *************************************************************** */
  .f-banners__list {
    width: 90%;
  }

  .f-banner__box {
    gap: 20px;
  }

  .f-banner__box .icon {
    width: 20%;
  }

  .f-banner__box .content p {
    font-size: 1.4rem;
  }

  .f-banner__box .link-arrow {
    margin-top: 3px;
    font-size: 1.4rem;
  }

  /* **************************************************************
   recruit
  *************************************************************** */
  .f-recruit__container {
    width: 90%;
    border-radius: 30px;
  }

}





/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 374px（スマホ中）


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 374px) {}