.sub-ttl-en {
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
  }
  h2 {
    margin: 0;
    padding: 0;
    background: none;
  }
  h2 span {
    display: unset;
    background: none;
    font-weight: inherit;
    font-size: inherit;
    padding: 0;
  }
section#opening .bg {
    position: relative;
    height: 56.66vw;
    z-index: 0;
}
section#opening .bg::before {
    position: absolute;
    content: "";
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/opening-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    z-index: -1;
    height: 56.66vw;
}
.opening {
    width: 100%;
    height: 100%;
    position: relative;
}
.opening div.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-75%);
}
.opening div.container.--txt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-48%);
}
div#tagline img {
    text-align: center;
    display: block;
    margin: 0 auto;
}
div#tagline img:nth-of-type(1) {
    margin: 0 auto clamp(5rem, 2.455rem + 5.3vw, 10.938rem);
    max-width: 213px;
    width: min(213px, 50%);
}
div#tagline img:nth-of-type(2) {
    width: min(825px, 90%);
    max-width: 1275px;
}

section#fv {
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/fv-bg-txt.svg),url(/assets/image/jp/ja/company/group/hfd/60th/index/fv-bg.jpg);
    background-repeat: no-repeat;
    background-size: 89%, cover;
    background-position: center -80px, center center;
}
#fv .Container {
    padding: 137px 0 159px;
}
#fv h1,#fv .sub-ttl {
    text-align: center;
    font-size: clamp(3.125rem, 2.178rem + 1.97vw, 3.75rem);
    font-weight: 500;
    margin-bottom: 38px !important;
    line-height: 100%;
}
#fv .sub-ttl {
    margin-bottom: 45px !important;
    font-size: 45px;
}
#fv .sub-ttl > span.u-txt-red {
    letter-spacing: -3px;
    vertical-align: top;
    font-weight: 400;
    vertical-align: baseline;
    padding: 0 3px;
    line-height: 100%;
    font-family: 'Outfit';
    font-size: 78px;
}
#fv p {
    margin-bottom: 66px !important;
    font-weight: 500;
}
#fv .bg div:has(img.mosaic) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/fv-bg-deco.png);
    background-size: 60%;
    background-position: center bottom;
    padding-bottom: 9rem;
    background-repeat: no-repeat;
}
img.mosaic {
    max-width: 786px;
    width: 70%;
    border: 2px solid #0E2891;
}
#fv button {
    position: absolute;
    top: -75px;
    right: 6vw;
}
#fv button > a {
    display: block;
}
section#message {
    background: #F3F5F9;
    padding: 82px 0;
}
#message h2 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 250%;
    margin: 0;
    padding: 0;
}
#message p {
    line-height: 250%;
    margin-bottom: 40px !important;
    text-align: justify;
}
.u-flex.--message {
    justify-content: center;
    gap: 81px;
}
.u-flex.--message div:nth-of-type(1) {
    flex-shrink: 0;
}
.u-flex.--message div:nth-of-type(2) {
    flex-basis: 58%;
}

section#interview {
    padding: 159px 0 149px;
}
#interview .u-flex.--interview {
    justify-content: space-between;
    gap: 56px;
}

#history .u-flex.--ttl ,
#interview .u-flex.--ttl {
    flex-direction: column;
}
.u-flex.--quiz .sub-ttl-en,
.u-flex.--documentary > .sub-ttl-en,
.u-flex.--message .sub-ttl-en,
#interview .u-flex.--ttl .sub-ttl-en,
#history .u-flex.--ttl .sub-ttl-en {
    margin-bottom: 2rem;
    font-size: 1.75rem;
    line-height: 130%;
}
#interview .--lead {
    max-width: 450px;
    margin-bottom: 70px;
}

section#history {
    padding: 200px 10px 149px 10px;
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/history-bg.jpg);
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
#history .Container{
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.25);
    padding: 80px;
    background: rgba(255, 255, 255, 0.649);
}
#history .u-flex.--ttl {
    line-height: 130%;  
}
#history .u-flex.--ttl > span:nth-of-type(2) {
    font-weight: 500;
}

.marker {
    text-decoration: underline;
    text-decoration-thickness: .8em;
    text-decoration-color: #F3F5F9;
    text-underline-offset: -.5em;
    text-decoration-skip-ink: none;
    position: relative;
    display: inline-block;
}
.marker::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #F3F5F9 transparent transparent transparent;
    border-width: 6px 5px 0 5px;
}

#history .u-flex.--history {
    max-width: 1041px;
    margin: 0 auto 60px 0;
    gap: 50px;  
}
#history .u-flex.--history > p {
    margin-top: auto;
    max-width: 600px;
}
#history .u-flex.--history > .--ttl {
    flex-shrink: 0;
}


.u-grid.--link {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 15px 30px;
    }

.u-grid.--link .box1 { grid-area: 1 / 1 / 2 / 2; }
.u-grid.--link .box2 { grid-area: 2 / 1 / 3 / 2; }
.u-grid.--link .box3 { grid-area: 3 / 1 / 4 / 2; }
.u-grid.--link .box4 { grid-area: 4 / 1 / 5 / 2; }
.u-grid.--link .box5 { grid-area: 1 / 2 / 2 / 3; }
.u-grid.--link .box6 { grid-area: 2 / 2 / 5 / 3; }
#history .u-grid.--link .--ttl {
    text-align: center;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 1.25rem;
}


#history .u-grid.--link div:not(.--ttl) {
    background-color: #F3F5F9; 
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 130%;
    height: 100%;
}
#history .u-grid.--link div:not(.--ttl) > img {
    height: 100%;
    object-fit: cover;
}
#history .u-grid.--link div:not(.--ttl) > div {
    flex: 1;
    -webkit-box-align: center;
    align-content: center;
}
#history .u-grid.--link div[class^="box"] > div {
    align-items: center;
    gap: 25px;
}
#history .u-grid.--link div[class^="box"] > div .--label {
    font-size: 0.9375rem;
}
#history .u-grid.--link div[class^="box"] > div .--btn {
    display: block;
    margin: 12px 12px 12px auto;
}
#history .u-grid.--link div.box6 > div {
    position: relative;
}
#history .u-grid.--link div.box6 .u-flex > div {
    display: flex;
    align-items: center;
}
#history .u-grid.--link div.box6 > div a {
    position: absolute;
    bottom: 0;
    right: 0;
}


section#documentary {
    padding: 110px 0 175px;
    position: relative;
    z-index: 0;
}
section#documentary .bg {
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    max-width: 1500px;
}
section#documentary .bg figure {
    position: absolute;
    bottom: clamp(0rem, -11.111rem + 23.15vw, 6.25rem);
    width: min(60%, 850px);
}
section#documentary .bg figure figcaption {
    font-size: .75rem;
    line-height: 140%;
}
#documentary > .Container > .u-flex.--documentary {
    flex-direction: column;
    align-items: flex-end;
}
.u-flex.--documentary > h2 {
    font-size: clamp(2.5rem, 1.743rem + 1.58vw, 3rem);
    line-height: 150%;
    letter-spacing: -3px;
    margin-bottom: 15px !important;
    background-color: #fff;
    padding: 0px 14px;
}
.u-flex.--documentary > .sub-ttl {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    
}
.u-flex.--documentary > .sub-ttl::before {
    content: "";
    width: 174px;
    height: 1px;
    background-color: #000;
}
.u-flex.--documentary > p {
    line-height: 200%;
    max-width: 395px;
    margin-bottom: 79px !important;
}

section#crosstalk .bg {
    display: flex;
    max-width: 1500px;
    margin: auto;
}
#crosstalk .bg img {
    min-width: 0;
}
#crosstalk > .Container > .u-flex.--crosstalk {
    flex-direction: column;
    margin: 0 80px;
}
.u-flex.--crosstalk > .sub-ttl-en {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}
.u-flex.--crosstalk > h2 {
    line-height: 130%;
    font-size: clamp(2.5rem, 1.743rem + 1.58vw, 3rem);
    margin-bottom: 23px !important;
}
.u-flex.--crosstalk > h2 > span {
    display: block;
    font-size: 1.375rem;
}
.u-flex.--crosstalk > .u-flex {
    justify-content: space-between;
    margin-bottom: 56px;
}

section#quiz {
    background-color: #F4F5F9;
    position: relative;
    padding: 138px 0 123px;
}
#quiz > .Container > .u-flex.--quiz {
    flex-direction: column;
    max-width: 762px;
    margin: 0 auto;
}
#quiz > .Container {
    position: relative;

}
.u-flex.--quiz > .sub-ttl-en {
    margin-bottom: 8px;
}

.u-flex.--quiz > h2 {
    line-height: 130%;
    font-size: clamp(2.5rem, 1.743rem + 1.58vw, 3rem);
    margin-bottom: 24px !important;
}
.u-flex.--quiz > p {
    max-width: 656px;
    margin-bottom: 48px !important;
}
.u-grid.--accordion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: #fff;
    padding: 28px 36px;
    border-radius: 5px;
    align-items: center;
    position: relative;
}
.u-grid.--accordion .box2 {
    font-weight: 500;
    margin-bottom: 1rem;
}   
.u-grid.--accordion .box3 > .u-flex {
    gap: 15px;
}   
.u-grid.--accordion .box4 {
    margin-left: auto;
}   
.u-grid.--accordion .box1 { grid-area: 1 / 1 / 2 / 2; }
.u-grid.--accordion .box2 { grid-area: 2 / 1 / 3 / 2; }
.u-grid.--accordion .box3 { grid-area: 3 / 1 / 4 / 2; }
.u-grid.--accordion .box4 { grid-area: 1 / 2 / 4 / 3; }
.u-grid.--accordion::after,.u-grid.--accordion::before{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}
.u-grid.--accordion::after{
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/quiz-bg02.png);
    width: 20vw;
    height: 379px;
    max-width: 369px;
    top: -340px;
    left: clamp(37.063rem, 24.376rem + 26.43vw, 47.438rem);;
}
.u-grid.--accordion::before{
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/quiz-bg.png);
    width: 13vw;
    max-width: 239px;
    height: 332px;
    right: clamp(40rem, 26.178rem + 28.8vw, 49.125rem);
}

section#future {
    padding: 180px 0;
    position: relative;
    z-index: 0;
}
#future .u-flex.--future {
   flex-direction: column; 
   position: relative;
   z-index: 0;
}
#future .bg {
    position: absolute;
    z-index: -1;
    inset: 0;
    max-width: 1440px;
    margin: auto;
}
#future .bg img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(65%, 809px);
}
.u-flex.--future > .sub-ttl-en {
    font-size: 1.75rem;
    margin-bottom: 8px !important;
}
.u-flex.--future > h2 {
    font-size: clamp(2.5rem, 1.743rem + 1.58vw, 3rem);
    margin-bottom: 36px !important;
}
.u-flex.--future > p {
    max-width: 370px;
    margin-bottom: 45px !important;
}

.u-txt-red {
    color: #e60027;
}
.u-txt-fz-2 {
    font-size: 1.375rem;
}
.u-txt-fz-3 {
    font-size: 3rem;
}
.u-txt-fz-4 {
    font-size: 2.5rem;
}
.u-txt-fz-6 {
    font-size: 3.75rem;
}
.u-tac {
    text-align: center;
}
.u-flex {
    display: flex;
}
.u-block {
    display: block;
}

body > #Contents button.btn-more {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}
body > #Contents button.btn-more a {
    padding: 22px 75px;
    background-color: #D9D9D9;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    border-radius: 80px; 
    position: relative;
    text-decoration: none;
    line-height: 100%;
    display: block;
}
body > #Contents button.btn-more a::after {
    content: "";
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/btn-arrow.svg);
    background-repeat: no-repeat;
    width: 31px;
    height: 30px;
    position: absolute;
    right: 14px;
    top: 16px;
    background-size: contain;
}
body > #Contents button.btn-more a:hover {
    opacity: .5;
}
#openingBgImage {
    visibility: hidden;
}
#openingBgImage.visible {
  visibility: visible;
  animation-duration: 1s;
  animation-name: fade-in;
}
  @keyframes fade-in {
    0% {
      visibility: hidden;
      opacity: 0;
    }
  
    50% {
      visibility: visible;
      opacity: 0.5;
    }
  
    100% {
      visibility: visible;
      opacity: 1;
    }
  }
@media screen and (max-width: 1200px) {
    .u-grid.--link,.u-grid.--accordion {
        grid-template-columns: 1fr;
    }
    .u-grid.--link > div[class^="box"], 
    .u-grid.--accordion > div[class^="box"] { 
        grid-area: auto / 1 / auto / 2;
    }
}
@media screen and (max-width: 450px) {
    section#crosstalk .bg {
        flex-direction: column;
    }
}
@media screen and (max-width: 767px) {
    body > #Contents button.btn-more a {
        padding: 22px 65px;
        font-size: 1rem;
    }
    .opening {
      height: 90vh;
  }
    .opening div.container.--count {
      width: 100%;
  }
  .u-flex.--quiz .sub-ttl-en, .u-flex.--documentary > .sub-ttl-en, .u-flex.--message .sub-ttl-en, #interview .u-flex.--ttl .sub-ttl-en, #history .u-flex.--ttl .sub-ttl-en {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  section#fv {
    background-position: center top, center center;
  }
#fv h1,#fv .sub-ttl {
    font-size: clamp(1.375rem, -0.057rem + 7.16vw, 3.375rem);
    margin-bottom: clamp(1.25rem, 0.803rem + 2.24vw, 1.875rem) !important;
}
#fv .sub-ttl {
    margin-bottom: 45px !important;
}
#fv p {
    font-size: clamp(1.141rem, 1.096rem + 0.22vw, 1.203rem);
}
#fv .sub-ttl > span.u-txt-red {
    font-size: clamp(2.5rem, 1.605rem + 4.47vw, 3.75rem);
}
#fv button {
    right: 0;
    top: -60px;
}
img.mosaic {
    width: 87%;
}
#fv button > a img.link-mosaic {
    width: clamp(8.125rem, 3.203rem + 24.61vw, 15rem);
}
#message h2 {
    font-size: clamp(1.094rem, 1rem + 0.89vw, 1.344rem);
    line-height: 200%;
}
#message p {
    line-height: 200%;
}
.u-flex.--message {
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.u-flex.--message div:nth-of-type(2) {
    width: 88%;
}
section#interview {
    padding: 110px 0 100px;
}
#interview .--lead {
    margin-bottom: 40px;
}
#interview .u-flex.--interview {
    flex-direction: column;
}
#interview .u-flex.--interview > div:nth-of-type(1) {
    margin-left: 0;
}
section#history {
    padding: 150px 10px 100px 10px;
}
#history .u-flex.--ttl > span:nth-of-type(2) {
    font-size: 1rem;
}
#history .Container {
    padding: 40px 0px;
}
#history .u-flex.--history {
    gap: 25px;
    flex-direction: column;
    padding: 0 1rem;
}
#history .u-grid.--link div[class^="box"] > div {
    flex-direction: column;
}
#history .u-grid.--link div[class^="box"] > div > img {
    object-fit: cover;
    width: 100%;
    height: auto;
}
.u-grid.--link .box6 {
    height: 50% !important;
}
#history .u-grid.--link div[class^="box6"] > div > img {
    height: min(357px, 60%);
}
#history .u-grid.--link .box6 > div > div > p {
    padding-bottom: 2rem;
}
#quiz > .Container {
    z-index: 0;
}
.u-grid.--accordion::after{
    width: 26vw;
    height: 25vw;
    left: unset;
    right: 0;
}
.u-grid.--accordion::before{
    width: 16vw;
    max-width: 239px;
    height: 22vw;
    right: unset;
    bottom: -50px;
    left: 0;
}
.u-flex.--crosstalk > .u-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

section#documentary {
    background-size: clamp(18.75rem, 9.801rem + 44.74vw, 31.25rem);
    background-position: left bottom 5%;
    padding: 64px 0 240px;
}
section#documentary::before {
    bottom: 0%;
    font-size: 10px;
}
#documentary > .Container > .u-flex.--documentary {
    margin-right: 0;
}
.u-flex.--documentary > p {
    margin-bottom: 0 !important;
}
section#crosstalk {
    padding-top: 40px;
}
#crosstalk > .Container > .u-flex.--crosstalk {
    margin: 0;
}
.u-flex.--crosstalk > .sub-ttl-en {
    font-size: 1rem;
    margin-bottom: 1rem;
}
.u-flex.--crosstalk > .u-flex {
    margin-bottom: 32px;
}
.u-grid.--accordion > div[class^="box"] { 
    margin-bottom: 0 !important;
}
.u-grid.--accordion .box3 > .u-flex {
    gap: 8px;
}
.u-grid.--accordion {
    grid-row-gap: 1.75rem;
    padding: 2rem 1rem;
}
section#future {
    padding: 100px 0;
    position: relative;
}
#future .bg {
    display: grid;
    place-items: center;
}
#future .bg img {
    position: relative;
    top: 24px;
    width: min(100%, 540px);
    opacity: .3;
}
.u-flex.--future > p {
    max-width: 90vw;
}
.u-flex.--crosstalk > h2,
#history h2,
.u-flex.--interview h2,
.u-flex.--documentary > h2,
.u-flex.--crosstalk > h2,
.u-flex.--quiz > h2,
.u-flex.--future > h2 {
    font-size: 1.5rem;
}
.u-grid.--link {
    grid-gap: 30px 15px;
    max-width: 88%;
    margin-inline: auto;
}
.u-grid.--link > div[class^="box"] { 
grid-area: auto;
}
#history .u-grid.--link div[class^="box"] > div {
    gap: 10px;
}
#history .u-grid.--link div:not(.--ttl) {
    font-size: 1rem;
}
}

.slider.--wrapper {
    overflow-x: clip;
    max-width: min(60%, 768px);
  }
  .swiper {
    overflow: visible !important;
}
.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 1em;
  }
  .slider-container .slider-card {
    height: auto;
    position: relative;
    z-index: 1;
    opacity: .6;
    cursor: pointer;
    pointer-events: none;
    background: #fff;
    transition: 1s;
  }

  .slider-card {
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
  }
  .slider-card > .--content {
    padding: 0 20px;
    position: relative;
    height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .slider-card > .--content > .--label {
    background-color: #D40000;
    border-radius: 3px;
    color: #fff;
    font-size: 0.75rem;
    padding: 0px 4px 0 7px;
    position: absolute;
    top: -15px;
    left: 20px;
  }
  .slider-card > .--content > .--belong {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .slider-card > .--content > .--name {
    font-size: 1.75rem;
  }
  .slider-card > .--content > .--name > ruby > rt {
    line-height: 130%;
    font-size: 0.6875rem;
  }
  .slider-img img {
    width: 100%;
    object-fit: cover;
  }

  .swiper-slide-active {
    transform: translateY(1rem) !important;
    transition: transform 0.3s ease; 
  }

  @media screen and (max-width: 767px) {
      .slider.--wrapper {
        max-width: 100svw;
        margin: calc(50% - 50vw);
    }
    .slider-card > .--content > .--name {
        font-size: 1.25rem;
    }
    section#opening .bg {
        height: 90vh;
    }
    section#opening .bg::before {
        background-position: top center;
        height: 90vh;
    }
    .opening-bg {
        padding: 0;
    }
    .opening div.container.--txt {
        width: 88%;
    }
  }
  @media screen and (min-width: 768px) {
    .u-flex.--quiz > h2 {
      white-space: nowrap;
    }
    }
/* 250214 英語ページ対応 */
  section#documentary.--en::before {
    content: "*When actually working, we wear work hats and gloves." !important;
}
.u-grid.--accordion.--en::after{
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/quiz-bg02-en.png);
}
.u-grid.--accordion.--en::before{
    background-image: url(/assets/image/jp/ja/company/group/hfd/60th/index/quiz-bg-en.png);
}
.swiper-wrapper.--en .slider-card > .--content {
    height: 185px;
  }