@charset "UTF-8";
/* ===============RESET======================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:rgba(0,0,0,0)
}
img {
    vertical-align:top
}
h1,h2,h3,h4,h5,h6 {
    -webkit-font-smoothing:antialiased
}
body {
    line-height:1
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
    display:block
}
ul {
    list-style:none
}
blockquote,q {
    quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
    content:"";
    content:none
}
a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:rgba(0,0,0,0)
}
del {
    text-decoration:line-through
}
abbr[title],dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help
}
table {
    border-collapse:collapse;
    border-spacing:0
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
html {
    overflow:auto;
    font-size:62.5%
}

*,*:before,*:after {
    box-sizing:border-box
}
a {
    text-decoration:none;
    color:#333;
    transition:.3s linear;
    box-sizing:border-box
}
a:hover {
    opacity:.7
}
.flex {
    display:flex
}

.h2 {
    font-size:2.8rem;
    line-height:1.5;
    padding-left:2rem;
    border-left:6px solid #c40000
}
@media(max-width: 991px) {
    .h2 {
        font-size:2rem;
        padding-left:1.5rem
    }
}
.h3 {
    font-size:2.3rem;
    line-height:1.5;
    position:relative;
    padding-bottom:1rem
}
@media(max-width: 991px) {
    .h3 {
        font-size:1.8rem
    }
}
.h3:before {
    content:"";
    display:block;
    width:100%;
    height:3px;
    background:#dbdbdb;
    position:absolute;
    bottom:0px
}
.h3:after {
    content:"";
    display:block;
    width:11%;
    height:3px;
    background:#c40000;
    position:absolute;
    bottom:0
}
.h4 {
    font-size:2.1rem;
    line-height:1.5;
    display:flex;
    align-items:center
}
@media(max-width: 991px) {
    .h4 {
        font-size:1.6rem
    }
}
.h4:before {
    content:"";
    display:block;
    width:2.9rem;
    height:2.9rem;
    background:url(../images/common/ic_check.svg) left center no-repeat;
    background-size:2.9rem 2.9rem;
    margin-right:.5rem;
    flex-shrink:0
}
/* ================================================ */
:root {
  --border-radius: 20px;
  --gap: 20px;
  --radius: 20px;

    /* Colors */
  --c-text: #333;
  --c-accent: #14607E;
  --c-accent-2: #466BB3;
  --c-danger: #E60719;
  --c-bg-blue: #F1F6FA;
  --c-bg-blue-2: #E8F0F6;
  --c-bg-gray: #ECECEC;

  /* Typography */
  --ff-deco: 'Cormorant Garamond', serif;
}
img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
body {
      margin: 0;
      color: var(--c-text);
      font: 1.6rem / 2 'Noto Serif JP', serif;
      overflow-wrap: break-word;
      word-break: break-word;
      overflow: hidden;
      position: relative;
      background-color: #fff;
    }
    h1, h2, h3, h4, h5 {font-weight: normal;}
    header {
      position: fixed;
      display: flex;
      justify-content: space-between;
      align-items: end;
      padding: 20px 40px 40px;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 5000;
      background: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0.6), rgba(255,255,255,0));
    }
    section {
      position: relative;
    }
    header .logo {
      font-size: 20px;
      font-weight: bold;
      width: 70%;
      max-width: 315px;
    }
    nav {
      display: flex;
      justify-content: center;
      line-height: 1.2;
      text-align: center;
    }
    nav a {
      text-decoration: none;
      color: var(--c-text);
      font-size: 16px;
      margin: 5px 34px 0 0;
    }
    nav a.header-entry {
      background: var(--c-danger);
      padding: 10px;
      color: #fff;
      margin-top: -5px;
      width: 120px;
    }
    nav a:last-child {
      margin-left: -20px;
    }
    h2.ttl01 {
      text-align: center;
      font-style: italic;
      font-family: var(--ff-deco);
      font-size: clamp(45px, 11.5vw + 1rem, 150px);
      margin: 0 0 2rem;
      line-height: 1.2;
    }
    h2.ttl01 span {
      font-size: clamp(14px, 2vw + 0.5rem, 20px);
      font-style: normal;
    }
    h2.ttl02 {
      text-align: center;
      font-style: italic;
      font-family: var(--ff-deco);
      font-size: clamp(45px, 6vw + 1rem, 80px);
      line-height: 1.2;
    }
    h2.ttl02 span {
      font-size: clamp(14px, 2vw + 0.5rem, 20px);
      font-style: normal;
      display: block;
    }
    h2.ttl03 {
      font-size: clamp(21px, 2vw + 1rem, 37px);
      margin-bottom: 2rem;
      margin-top: -2rem;
    }
    .ttl04 {
      text-align: center;
      position: relative;
      font-size: clamp(28px, 3vw + 1rem, 34px);
      letter-spacing: 0.1rem;
      line-height: 1.6;
    }
    .ttl04:after {
        content: '';
        width: 110px;
        background: #222;
        height: 1px;
        position: relative;
        display: block;
        margin: 2rem auto 8rem;
    }
    .ttl05 {
      font-size: clamp(18px, 3vw + 1rem, 26px);
      line-height: 1.6;
      margin-bottom: 2rem;
    }
    .ttl06, .ttl06-line {
      line-height: 1.6;
      margin-bottom: 5rem;
      color: #14607E;
      position: relative;
      font-size: clamp(22px, 3vw + 1rem, 30px);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ttl06-line::before {
      content: '';
      width: 30px;
      height: 1px;
      position: relative;
      margin: 0 10px 0 0;
      background: #14607e;
      display: inline-block;
    }
    .ttl06-line::after {
      content: '';
      width: 30px;
      height: 1px;
      position: relative;
      margin: 0 0 0 10px;
      background: #14607e;
      display: inline-block;
    }

    
    /* grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* PCでは3カラム */
      gap: var(--gap); /* 隙間 */
    }

    .grid li {
      background: #fff;
      text-align: center;
      padding: 4rem 10px 10px;
    }

    .grid li h4 {
      color: #466BB3;
      font-family: 'Noto SansSerif JP', sans-serif;
      font-size: clamp(18px, 1vw + 1rem, 24px);
      margin-bottom: 2rem;
      line-height: 1.2;
    }
    #benefits .grid li {
      background: var(--c-bg-blue);
    }

    /* スマホ対応（画面幅が600px以下の場合） */
    @media (max-width: 600px) {
        .grid {
          grid-template-columns: repeat(2, 1fr); /* スマホでは2カラム */
        }
        .grid li {
          background: #fff;
          text-align: center;
          padding: 2rem 10px 10px;
        }
    }

    .voice-movie {
      max-width: 944px;
      margin: -5rem auto 10rem;
      width: 90%;
    }
    /* movie */
    .videos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: start;
    }

    /* 動画カードの共通スタイル */
    .video-card {
      overflow: hidden;
      /* box-shadow: 0 6px 20px rgba(16,24,40,0.06); */
      display: flex;
      flex-direction: column;
    }

    /* レスポンシブなiframeラッパー（16:9） */
    .video-embed {
      width: 100%;
      /* modern browsers */
      aspect-ratio: 16 / 9;
      background: #000;
    }
    /* fallback for older browsers */
    .video-embed iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
    }
    /* Ensure iframe fills container (for browsers not supporting aspect-ratio) */
    @supports not (aspect-ratio: 16/9){
      .video-embed {
        position: relative;
        padding-top: 56.25%; /* 9/16 = 56.25% */
        height: 0;
      }
      .video-embed iframe {
        position: absolute;
        top:0; left:0; width:100%; height:100%;
      }
    }

    /* タイトル・説明 */
    .video-meta {
      padding: 1rem 0 1rem;
    }
    .ttl-video {
      font-size: 18px;
    }
    .ttl-video span {
      font-size: 14px;
    }
    .video-desc{
      margin: 5px 0 0 0;
      font-size: 18px;
      line-height: 1.4;
    }
    @media (max-width: 768px) {
        .videos {
        display: grid;
        grid-template-columns: 2fr;
        gap: var(--gap);
        align-items: start;
      }
    }


    /* interview */
    #interview .interview {
      background: #fff;
    }
    #interview .interview .inner {
      padding: 8rem 0;
    }
    #interview .bg-blue, #interview .bg-blue .flex2 {
      padding: 0;
    }
    #interview .bg-blue .flex2 img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    #interview .interview .flex-member a span {
      background: #fff;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8rem 2rem 8rem 2.5rem;
    }
    #interview .bx-interview {
      max-width: 470px;
      padding: 2.5rem 2.5rem 3rem;
      background: #fff;
      position: relative;
      bottom: 20rem;
      left: 55%;
      width: 88%;
    }
    #interview .bx-interview p span {
        font-size: clamp(20px, 2vw + 0.5rem, 28px);
        margin-left: 10px;
    }
    #interview .bx-interview .title {
        font-size: clamp(14px, 2vw + 0.5rem, 20px);
    }
    #interview .bx-interview .title::after {
      content: '';
      width: 370px;
      height: 255px;
      display: block;
      background: url(../images/interview/txt_challenge.svg) 0 0 no-repeat;
      background-size: cover;
      position: absolute;
      bottom: -16rem;
      left: calc(100% - 310px);
    }
    #interview .interview_img01 {
      width: 60%;
      margin-top: -8rem;
    }
    #interview .voice .bg-blue {
       margin-top: 8rem;
    }
    #interview .voice .flex2 {
       align-items: center;
       padding: 0;
    }
    #interview .voice .flex2 li {
      height: 100%;
    }
    #interview .voice .flex2 li img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center center;
    }
    /* schedule */
    .timeline {
      position: relative;
      text-align: left;
      max-width: 410px;
      width: 100%;
      margin: 0 auto;
      font-size: 20px;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 105px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #14607E;
      height: calc(100% - 20px);
    }

    .timeline-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 3rem;
      position: relative;
    }
    .timeline-item .time {
      width: 80px;
      text-align: right;
      color: var(--c-text);
      margin-top: -15px;
    }
    .timeline-item .dot {
      width: 12px;
      height: 12px;
      background: #14607E;
      border-radius: 50%;
      margin: 0 20px;
      position: relative;
      z-index: 1;
    }
    .timeline-item .txt-schedule {
      flex: 1;
      margin-top: -15px;
      margin-right: 10px;
    }

    .voice .flex2 li:first-child {
      padding: 8rem 0 0;
    }

    /* about */    
    #about h3 {
      text-align: center;
      width: 80%;
      margin: 0 auto 4rem;
      line-height: 1.4;
    }
    #message .name {
      text-align: right;
      font-size: clamp(18px, 1vw + 1rem, 20px);
    }
    #message .flex2 {
      align-items: center;
    }
    #message h2 {
      position: relative;
      line-height: 1.6;
    }
    #message h2::before {
      content: 'Representative message';
      font-family: var(--ff-deco);
      font-size: 24px;
      border-bottom: 1px solid;
      display: block;
      margin-bottom: 2rem;
      font-size: clamp(20px, 1vw + 0.5rem, 24px);
      line-height: 1;
      padding-bottom: 1rem;
    }
    #message .voice-movie {
      max-width: 944px;
      margin: 8rem auto 10rem;
      width: 90%;
    }


    .ttl-message {
      text-align: center;
      position: relative;
      font-size: clamp(24px, 2vw + 1rem, 34px);
      letter-spacing: 0.1rem;
      display: inline-block;
      line-height: 1.6;
    }
    .ttl-message:before, .ttl-message:after { 
      content:'';
      width: 20px;
      height: 30px;
      position: absolute;
      display: inline-block;
    }

    .ttl-message:before {
      border-left: solid 1px #222;
      border-top: solid 1px #222;
      top:0;
      left: -20px;
    }

    .ttl-message:after {
      border-right: solid 1px #222;
      border-bottom: solid 1px #222;
      bottom:0;
      right: -20px;
    }


    /* ハンバーガー */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 26px;
      height: 19px;
      cursor: pointer;
      position: fixed;
      top: 30px;
      right: 30px;
      z-index: 5000; /* ← 最前面に */
      transition: all 0.3s ease;
    }
    .hamburger span {
      display: block;
      height: 3px;
      background: #000;
      border-radius: 2px;
      transition: all 0.4s ease;
    }
    /* ハンバーガー → × */
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    /* フルスクリーンメニュー */
    .mobile-nav {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(255,255,255,0.95);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      z-index: 2000; /* ← ハンバーガーより下 */
      padding-top: 9rem;
    }
    .mobile-nav.active {
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-nav a {
      text-decoration: none;
      color: var(--c-text);
      font-size: 18px;
      transition: color 0.3s ease;
      padding: 1rem;
      width: 100%;
      border-bottom: 1px solid #d0d0d0;
    }
    .mobile-nav a.header-entry {
      max-width: 300px;
      width: 80%;
      border: none;
      background: var(--c-danger);
      margin-top: 20px;
      color: #fff;
    }

    @media (max-width: 1380px) {
      header nav { display: none; }
      .hamburger { display: flex !important; }
    }

    /* ヒーロー */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    .hero img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1.5s ease;
    }
    .hero img.active {
      opacity: 1;
    }
    .overlay {
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      width: 55%;
    }
    .overlay img {
      width: 638px;
      height: auto;
    }

    .overlay p {
      font-size: 20px;
      margin-top: 16px;
    }
    .top-message {
        background: url(../images/top/bg_message.jpg) center center no-repeat;
        background-size: cover;
        line-height: 30px;
        text-align: center;
        padding: 3rem 0 7rem;
    }
 .top-message h2 {
        letter-spacing: 1rem;
        font-size: clamp(20px, 3vw + 1rem, 42px);
        line-height: 1.4;
        margin: 5rem 0 7rem 0;
    }
    .inner {
        padding: 13rem 0;
    }
    .scroll-container {
        position: relative;
        width: 100%;
        overflow: hidden; /* ここで表示領域を制限 */
        position: absolute;
        margin-top: -15rem;
        display: flex;
        flex-wrap: nowrap;
    }

    .flowing {
        font-size: 150px;
        white-space: nowrap;
        display: inline-block;
         background: linear-gradient(0deg, #1F8CB9 0%,#9EEAF1 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-style: italic;
        font-family: var(--ff-deco);
        animation: scroll-left 60s linear infinite;
        position: relative;
        z-index: 1;
        margin-right: 30px;
    }
    .flex2, .flex3 {
      display: flex;
      justify-content: space-between;
      gap: 3rem;
    }

    .flex3 li {
      flex: 1;
      position: relative;
      margin: 0 auto;
    }
    .flex2 li {
      width: 50%;
    }
  /* TOP ABOUT */
    .about {
      background: var(--c-bg-blue);
    }
    .about .inner {
      width: 100%;
      max-width: 1020px;
      margin-right: auto;
      margin-left: auto;
    }
    .about .img_wrap {
        max-height: 214px;
        width: 100%;
        overflow: hidden;
    }
    .about .img_wrap img {
        height: auto;
        transition: transform .6s ease;
    }
    .about .img_wrap:hover img {
        transform: scale(1.1); /* 拡大 */
    }
    .about h3 {
      font-size: clamp(18px, 2vw + 0.5rem, 26px);
      line-height: 1.2;
    }
    .about h3 img {
      transition: transform 0.3s ease; /* アニメーション */
    }
    .about .flex3 li:after {
      content: '';
      position: absolute;
      right: 0;
      width: 100px;
      height: auto;
      background: url(../images/common/arrow.svg) right bottom no-repeat;
      height: 10px;
      bottom: 10px;
      display: block;
    }
    .about .flex3 a:hover {
      color: #14607e;
    }
    /* TOP message */
    .btn-view {
      border: 1px solid;
      padding: 5px 0;
      width: 120px;
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      display: block;
      cursor: pointer;
      margin-top: 2rem;
      font-size: 16px;
    }
    .btn-view:hover {
      border: 1px solid var(--c-text);
      background: var(--c-text) !important;
      color: #fff;
      opacity: 1 !important;
    }
    .flex-message {
      display: flex;
      align-items: center;
      position: relative;
      gap: 4rem;
    }

    .flex-message li:first-child {
      width: 40%;
      margin-left: 10px;
    }
    .flex-message li:last-child {
      position: relative;
    }
    .flex-message li:last-child div {
      position: absolute;
      left: 0;
      top: 17%;
      font-size: clamp(12px, 2.5vw, 27px);
    }
        @media (max-width: 768px) {
          .flex-message li:last-child div {
                font-size: clamp(12px, 3.5vw, 27px);
          }
        }
    .flex-message li:last-child div p {
      margin-bottom: 10px;
    }
    .message .inner {
      max-width: 1020px;
      width: 100%;
      margin: 2rem auto 8rem;
    }
    .message .name {
      border-bottom: 1px solid;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-top: 20px;
    }
    .message .name span {
      font-size: clamp(9px, 0.5vw + 1rem, 17px);
      margin-right: 20px;
    }
    .bg-white {
      background: #fff;
      padding: 5px 5px 5px 10px;
    }
    /* TOP INTRODUCTION */
    .introduction {
      background: url(../images/top/bg_intro.jpg) center center no-repeat;
      background-size: cover;
      position: relative;
      padding: 0 6rem;
    }
    .introduction h2, .interview h2 {
      position: absolute;
      top: -9rem;
      left: -3rem;
      width: calc(100% + 3rem);
      }
    .interview h2 {
      top: -10rem;
      }
    .introduction img {
      width: 60%;
      max-width: 810px;
      position: relative;
    }
    .introduction p {
      background: #fff;
      padding: 5rem 3rem;
      width: 50%;
      position: relative;
      top: -30px;
      left: 46%;
    }
    /* TOP INTERVIEW */
    .interview {
      background: var(--c-bg-gray);
      position: relative;
      padding: 2rem 6rem;
    }
    .interview .btn-view, .introduction .btn-view {
      margin-right: 0;
      margin-top: auto;
    }
    .flex-member {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: clamp(14px, 1vw + 1rem, 18px);
      line-height: 1.8;
    }
    .flex-member img {
      width: 100%;
      aspect-ratio: 292 / 410;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .flex-member a {
      flex: 1 1 calc(25% - 50px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .flex-member a .name {
      position: relative;
      margin: 0 0 10px;
      font-size: 18px;
    }

    .flex-member a span {
      position: absolute;
      bottom: 25px;
      background: var(--c-bg-gray);
      padding: 5px 10px 5px 0;
      line-height: 1.4;
      font-size: 14px;
    }

    /* スマホ：2列に変更 */
    @media (max-width: 768px) {
      .flex-member {
        gap: 20px;
      }
      .flex-member a {
        flex: 1 1 calc(50% - 10px); /* 2列（スマホ） */
        margin-bottom: 3rem;
      }
        .flex-member a span {
        font-size: 12px;
      }

    }

    /* TOP benefits */
    .benefits {
      background: url(../images/top/bg_benefits.jpg) 0 0 no-repeat;
      background-size: cover;
      color: #fff;
      position: relative;
      padding: 15rem 0 1rem;
    }
    .ttl_benefits {
      font-style: italic;
      font-family: var(--ff-deco);
      font-size: clamp(45px, 7.5vw + 1rem, 124px);
      margin: -15rem 0 5rem 6rem;
      line-height: 1;
      position: absolute;
    }
    .bx_benefits {
      width: 40%;
      margin-left: 55%;
    }
    .benefits .btn-view {
      color: #fff;
      margin-right: 0;
    }
    /* TOP ENTRY */
    .entry {
      background: url(../images/top/bg_entry.jpg) center center no-repeat;
      background-size: cover;
    }
    .entry .inner {
      max-width: 920px;
      margin-right: auto;
      margin-left: auto;
    }
    .entry .flex2 li a {
      width: 100%;
      text-align: center;
      display: block;
      background: var(--c-danger) url(../images/common/arrow2.svg) calc(100% - 40px) center no-repeat;
      color: #fff;
      padding: 3rem 0;
      font-size: clamp(17px, 1vw + 1rem, 28px);
    }
    .entry .flex2 li a:hover, .btn02:hover, .entry-content a:hover, input[type="submit"]:hover {
      background: var(--c-danger) url(../images/common/arrow2.svg) calc(100% - 20px) center no-repeat;
      opacity: 1;
    }
    /* FOOTER */
    .footer {
      background-color: #3D3D3D;
      color: #fff;
      padding: 76px 20px 76px;
    }
    .footer-address, .footer-address a {
      color: #929292;
      margin-bottom: 5.2rem;
    }
    .footer-inner {
      max-width: 1440px;
      margin: 0 auto;
      text-align: center;
    }

    .footer-logo {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 5.2rem;
    }

    .footer-nav ul {
      list-style: none;
      padding: 0;
      margin: 0 0 5.2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }

    .footer-nav a, .footer-link a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: opacity 0.3s;
      display: block;
      padding-bottom: 2rem;
    }

    .footer-nav a:hover, .footer-link a:hover {
      opacity: 0.7;
    }

    .footer-copy {
      font-size: 12px;
      color: #aaa;
    }
    .footer-nav a.link-blank, .footer-link a.link-blank {
      background: url(../images/common/arrow_blank.svg) right 2px no-repeat;
      background-size: 15px auto;
      padding-right: 20px;
      display: inline-block;
      line-height: 1.2;
    }

    /* TOTOP */
    #back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: var(--c-text);
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 1000;
      border: none;
    }

    #back-to-top.show {
      opacity: 1;
      pointer-events: auto;
    }
    #back-to-top::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: rotate(45deg);
        position: absolute;
        top: 54%;
        left: 50%;
        translate: -50% -50%;
    }
    
    .content {
      margin-top: 105px;
    }
    .content .ttl {
      background: linear-gradient(to right, #E1F7F9, #99D2EA);
      padding: 148px 0 0 0;
      position: relative;
      margin-bottom: 4rem;
    }
    .content h1 {
      font-style: italic;
      font-family: var(--ff-deco);
      font-size: clamp(127px, 1vw + 0.5rem, 150px);
      margin: 0 0 1rem 40px;
      line-height: 1.2;
      position: absolute;
      bottom: -90px;
    }
    .content h1.ttl-s {
      font-size: 80px;
      bottom: -73px;
      line-height: 1;
    }
    .content h1 span {
      font-size: clamp(14px, 2vw + 0.5rem, 20px);
      font-style: normal;
      margin-left: 10px;
    }
    #breadcrumb {
      text-align: right;
      margin-right: 40px;
      padding-top: 2rem;
    }
    #breadcrumb a {
        text-decoration: underline;
    }
    #breadcrumb a:hover {
        text-decoration: none;
    }
  /* entry form =========================*/
    .grecaptcha-badge {
        display: none!important;
    }
    button, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea {
        border: 1px solid #e5e5e5;
        padding: 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        font-size: 1.8rem;
        box-sizing: border-box;
        width: 100%;
        max-width: 576px;
        background-color: #F8F8F8;
    }
   input[type="text"], input[type="email"], input[type="url"] {
        border-radius: 3px;
    }
    #form table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      max-width: 945px;
      margin: 0 auto 5rem;
    }
    #form table th, #form table td {
        box-sizing: border-box;
        padding: 2rem 0;
        border-bottom: 1px solid #e8e8e8;
        text-align: left;
        font-weight: 400;
    }
    #form table th {
        width: 25rem;
        vertical-align: middle;
    }

    .required, .required2 {
        color: #fff;
        font-size: 14px;
        background-color: #e60012;
        margin-right: 2rem;
        padding: 1px 5px 2px 7px;
        letter-spacing: 2px;
        vertical-align: top;
        float: right;
    }
    .required2 {
        float: initial;
        margin-right: 0;
    }
    .wpcf7-form-control-wrap {
        position: relative;
    }
    .wpcf7-form input {
        box-sizing: border-box;
    }
    .wpcf7-form input {
        box-sizing: border-box;
    }
    input[type="submit"], input[type="submit"]::before, input[type="submit"]::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all .3s;
        transition: all .3s;
        cursor: pointer;
    }
    input[type="submit"] {
      display: block;
      color: #fff;
      box-shadow: none;
      border: none;
      max-width: 350px;
      width: 90%;
      font-size: clamp(16px, 3vw + 1rem, 28px);
      margin: 40px auto 0;
      font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      background: var(--c-text) url(../images/common/arrow2.svg) calc(100% - 40px) center no-repeat;
      padding: 30px 10px;
  }
    .hyphen {
        margin: 0 5px;
    }
    .wpcf7-form .wpcf7-radio .wpcf7-list-item {display:block;margin: 0 1rem 0 0 !important;}
    #form .radio-gender .wpcf7-list-item {display:inline-block;margin: 0 1rem 0 0 !important;}
    #form label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;}
    #form .input-sm {
        width: 132px;
    }
    /* 行を横並びに */
    .zip-row{
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: nowrap;
      margin-top: 5px;
    }

    /* 入力欄の横幅（桁数に合わせてch単位） */
    .zip-row .zip-input{
      width: 6ch;          /* 3桁用の目安 */
      max-width: 6ch;
    }
    .zip-row .zip-input[name="zipcode2"]{
      width: 8ch;          /* 4桁用の目安 */
      max-width: 8ch;
    }

    /* テーマに input{width:100%} がある場合の上書き保険 */
    .zip-row .wpcf7-form-control{
      width: auto;
      display: inline-block;
    }

    /* お好みで見た目調整 */
    .zip-row .zip-mark{ margin-right: .25rem; }
    .zip-row .hyphen{ display:inline-block; }
    .wpcf7-response-output {border-color: var(--c-danger) !important;text-align: center;padding: 2rem 1rem !important;}
    @media (max-width: 576px) {
        #form table th {
            border-bottom: none;
            padding-bottom: 0;
        }
        #form table th, #form table td {
            width: 100%;
            display: block;
            padding-top: 5px;
        }
        .required {
            margin-left: 1rem;
            float: initial;
        }
        .wpcf7-response-output {text-align: left;}

    }
    /* entry ==================================== */
    .flex-entry {
      display: flex;
      max-width: 100%;
      height: auto;
      align-items: stretch;
      gap: 80px;
      max-width: 860px;
      justify-content: center;
      margin: 0 auto;
    }

    /* 左右を同じ幅に */
    .entry-image, 
    .entry-content {
      flex: 1; /* 1:1 で同じ幅 */
    }

    /* 画像を親の高さにフィットさせる */
    .entry-image {
      display: flex;
      justify-content: center;
    }
    .entry-image img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 縦横比を保ちながら埋める */
      max-width: 390px;
    }

    /* テキストとボタン */
    .entry-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .entry-content a {
      width: 100%;
      height: 100%;
      background: var(--c-danger) url(../images/common/arrow2.svg) calc(100% - 40px) center no-repeat;
      padding: 0;
      margin: 0;
      font-size: 28px;
      color: #fff;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #entry .btn02 {
      flex: none;
      width: 100%;
      max-width: 390px;
      display: block;
      margin: 0 auto;
      padding: 40px 10px;
    }
    /* -------------------
      スマホ対応（縦並び）
      ------------------- */
    @media (max-width: 768px) {
      .flex-entry {
        flex-direction: column;
        gap: var(--gap);
      }

      .entry-image, 
      .entry-content {
        flex: none;
        width: 100%;
        max-width: 390px;
        display: block;
        margin: 0 auto;
      }

      .entry-content a {
        font-size: 22px;
        flex: initial;
        padding: 10% 0;
        min-height: 100px;
      }
    }
/****************************************

	mod-table

*****************************************/
.mod-table01 th,
.mod-table01 td {
	box-sizing: border-box;
	padding: 2rem 0;
	border-bottom: 1px solid #e8e8e8;
	text-align: left;
	font-weight: normal !important;
}
.mod-table01 th {
	vertical-align: top;
  width: 20%;
}

.mod-table01 {
	margin-bottom: 8rem;
  width: 100%;
}
.mod-table01 {
	margin-bottom: 0;
}
.mod-dl dt, .mod-dl2 dt {
    font-size: 1.5rem;
    background: var(--c-text);
    color: #fff;
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0 2.5rem;
    line-height: 1.8;
}
.mod-dl dd {
    position: relative;
}
.mod-dl dd {
    position: relative;
    padding-left: 1rem;
}
.mod-dl dd::before {
    content: "・";
    font-weight: bold;
    margin-left: -1em;
    width: 15px;
    display: inline-block;
}
.mod-dl {
    margin-top: 0.8rem;
    margin-bottom: 1.8rem;
}

@media (max-width: 576px) {
.mod-table01 th,
.mod-table01 td {
	width: 100%;
	display: block;
	padding: 1.5rem 1rem !important;
}
.mod-table01 th,
.mod-table01 td {
	border-bottom: none;
}

.mod-table01 th {
	background: rgba(0,0,0,0.03);
  border-top: 1px solid;
}

}



    /* box */
    .bx01 {
      border: 1px solid;
      padding: 2rem 1rem;
      text-align: center;
    }
    /* list */
    .li01 {
      margin-left: 1.5em;
    }
    .li01 dt {
      position: relative;
      font-size: 22px;
      line-height: 1.6;
      font-size: clamp(18px, 2vw + 1rem, 22px);
      margin-bottom: 1rem;
    }
    .li01 dt::before {
      position: relative;
      content: '◎';
      margin-right: -1em;
      left: -1.2em;
    }
    .li01 dd {
      margin-bottom: 4rem;
      line-height: 1.4;
    }
    .li02 {
      list-style-type: disc;   /* ●を先頭に */
      margin: 0 0 1em 1.5em;   /* 左に余白を作る */
      padding: 0;
    }

    .li-voice, .li-voice2 {
      margin: 0 6rem;
    }
    .li-voice dt, .li-voice2 dt {
      font-size: 20px;
      padding-bottom: 10px;
      padding-left: 5rem;
      border-bottom: 1px solid;
      margin-bottom: 2rem;
      background: url(../images/interview/no01.svg) left 0 no-repeat;
      background-size: 40px auto;
      line-height: 1.6;
    }

    .li-voice dt:nth-of-type(2) {
      background: url(../images/interview/no02.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .li-voice dt:nth-of-type(3) {
      background: url(../images/interview/no03.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .li-voice2 dt:nth-of-type(1) {
      background: url(../images/interview/no04.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .li-voice2 dt:nth-of-type(2) {
      background: url(../images/interview/no05.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .li-voice2 dt:nth-of-type(3) {
      background: url(../images/interview/no06.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .li-voice2 dt:nth-of-type(4) {
      background: url(../images/interview/no07.svg) left 0 no-repeat;
      background-size: 40px auto;
    }
    .voice dd, .voice2 dd {
      margin-bottom: 6rem;
    }
    .voice dd:last-child, .voice2 dd:last-child {
      margin-bottom: 0;
    }
    .voice .flex, .voice .flex-re {
      align-items: start;
    }
    .voice .fukidashi-wrap {
      align-items: center;
      position: relative;
    }

    .fukidashi-wrap .box-8 {
      position: relative;
      margin-left: 4rem;
    }
    .fukidashi-wrap .box-8:before {
      position: relative;
      content: '＼ 最後に、新卒で入社を検討している方へのメッセージをお願いします ／';
      width: auto;
      text-align: center;
      width: 100%;
      display: block;
      font-size: clamp(12px, 1vw + 0.5rem, 18px);
      margin-bottom: 1rem;
      }

    .fukidashi {
      position: relative;
      background: #fff;
      padding: 3rem;
      border-radius: var(--radius);
      text-align: center;
      font-size: 18px;
    }
    .fukidashi:before {
        border-bottom: 20px solid transparent;
        border-top: 20px solid transparent;
        top: 30%;
        content: "";
        position: absolute;
        left: -23px;
    }
    .fukidashi:after {
        content: "";
        position: absolute;
        border-right: 24px solid #fff;
        border-bottom: 20px solid transparent;
        border-top: 20px solid transparent;
        top: 30%;
        left: -17px;
    }

    /* benefits */
    #benefits .flex {
      align-items: start;
    }
    #benefits .box-2 {
      margin: 0 auto;
      width: 150px;
    }
    /* table */
    .schedule-table {
      margin: 2rem auto;
      width: 100%;
      border-collapse: collapse;
    }

    .schedule-table th,
    .schedule-table td {
      padding: 12px 16px;
      text-align: left;
    }

    .schedule-table thead th {
      border-bottom: 1px solid;
      font-weight: normal;
    }

    .schedule-table tbody tr:nth-child(even) {
      background: #f4f7fa;
    }
    .schedule-table th:first-of-type, .schedule-table td:first-of-type {
      text-align: center;
      width: 24%;
      padding: 12px 10px;
    }



    /* flexbox */
    .flex, .flex-re {
      display: flex;
      gap: 4rem;
      align-items: center;
    }
    #interview .flex, #interview .flex-re {
      gap: 0;
    }
    .box-2 {flex: 3;}
    .box-8 {flex: 8;}
    .box-4 {flex: 4;}
    .box-6 {flex: 6;}

    /* スマホ対応：幅が768px以下なら縦並びに */
    @media (max-width: 768px) {
      .flex {
        flex-direction: column;
      }
      .voice .fukidashi-wrap {
        flex-direction: row;
        gap: var(--gap);
        padding-top: 3rem;
      }
      .flex-re {
        flex-wrap: wrap-reverse;
      }

      .box-4, .box-6 {
        flex: none;
        width: 100%;
      }
      #interview .box-4 img {
        margin: 2rem 0;
      }
      
    }


    .bx-gray {
      background: #F6F6F6;
      padding: 8rem 2rem;
      text-align: center;
      max-width: 1130px;
      margin: 0 auto;
    }
    .content-wrap {
      max-width: 1130px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .bg-blue {background: var(--c-bg-blue);}
    .bg-blue2 {background: var(  --c-bg-blue-2);}
    
    .att01 {color: #952C2C;}
    .center {text-align: center;}
    .center-m {margin-right: auto;margin-left: auto;display: block;}
    .small {font-size: 80%;line-height: 1.4;}
    .block {display: block;}
    a.underline {text-decoration: underline;}
    .mb1 {margin-bottom: 1rem;}
    .mb2 {margin-bottom: 2rem;}
    .mb3 {margin-bottom: 3rem;}
    .mb4 {margin-bottom: 4rem;}
    .mb6 {margin-bottom: 6rem;}
    .mb8 {margin-bottom: 8rem;}
    .mb10 {margin-bottom: 10rem;}
    .pl20 {padding-left: 20px;}
    .pr20 {padding-right: 20px;}
    .w70per {max-width: 70%;}
    .btn01, .btn02 {
      padding: 20px 10px;
      text-align: center;
      background: var(--c-text);
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      width: 390px;
      max-width: 80%;
      display: block;
      color: #fff;
      cursor: pointer;
    }
    .btn01:hover {
      background: var(--c-danger);;
      opacity: 1;
    }
    .btn02 {
      background: var(--c-danger) url(../images/common/arrow2.svg) calc(100% - 40px) center no-repeat;
      padding: 30px 10px;
      font-size: 28px;
    }

/* PC */
   @media (max-width: 1268px) {
      .footer-nav {
        display: block;
      }
    }
/*  */
    @media (max-width: 1112px) {
     .introduction h2, .interview h2 {top: -7rem;width: calc(100% + 5rem);}
     .interview h2 {top: -9rem;}
     h2.ttl01 span {display: block;}
     #interview .bx-interview {bottom: 10rem;left: 35%;}
     #interview .bx-interview .title::after {
        width: 300px;
        height: 205px;
        bottom: -12rem;
        left: calc(100% - 250px);
      }
  }
/* PC */
   @media (min-width: 768px) {
      .sp {display: none;}
      .about .inner {
          padding-right: 2rem;
          padding-left: 2rem;
      }
    }
    
/* SP */
    @media (max-width: 768px) {
      img, .box-8 { width: 100%;}
      .t-left-sp {text-align: left;padding: 0 10px;}
      .fukidashi-wrap .box-8 {width: 70%;margin-left: 20px;}
      .pc {display: none;}
      .footer {
        padding: 46px 10px 46px;
      }
      .footer-logo {
        width: 313px;
        margin: 0 auto 2rem;
      }
      .overlay p { font-size: 16px; }
      .scroll-container {
        margin-top: -10rem;
      }
      .flowing {
        font-size: 100px;
      }
      .flex3, .flex-message {
        flex-direction: column;
      }
      .message .btn-view {
        position: absolute;
        bottom: -80px;
        right: 20px;
      }
      .fukidashi-wrap .box-8:before {
        content: '最後に、新卒で入社を検討している方への\Aメッセージをお願いします';
        white-space: pre; 
        width: 280px;
        left: calc(25% - 140px);
        top: -70px;
        font-size: clamp(14px, 1vw + 0.5rem, 18px);
        position: absolute;
      }
      .footer-address {
        font-size: 12px;
        border-bottom: 1px solid #727272;
        padding-bottom: 2rem;
        margin-bottom: 1rem;
      }
      .footer-link {
        display: block;
        border-bottom: 1px solid #727272;
        margin-bottom: 2rem;
      }

      .footer-nav ul {
        margin: 0 0 2rem;
        gap: 10px;
      }
      .footer-nav ul li {
        width: 40%;
      }
      header {
        padding: 20px 10px 40px;
      }
      .inner {
          padding: 5rem 0;
      }
      .about {
          padding: 0 20px;
      }
      h2.ttl01 span {
        display: block;
      }
      h2.ttl02 {
        font-size: 12.5vw;
      }
      .top-message {
          background: url(../images/top/bg_message_sp.jpg) center bottom no-repeat;
          background-size: cover;
          padding: 3rem 0 18rem;
      }
      .top-message h2 {
          letter-spacing: 0.8rem;
          margin: 2rem 0 3rem 0;
      }
      .overlay {
          position: absolute;
          top: 30%;
          left: 43%;
          width: 80%;
      }
      .flex-message {
          gap: 0;
      }
      .message .inner {
          margin: 0 auto 12rem;
      }
      .flex-message li:first-child {
          margin-left: -40%;
          width: 100%;
      }
      .flex-message li:last-child {
          width: 90%;
          margin-left: 5%;
      }
      .introduction h2, .interview h2 {
          position: absolute;
          top: -13rem;
          left: -6rem;
          width: calc(100% + 12rem);
      }
      .interview h2 {
          top: -12rem;
      }
     .introduction {
        padding: 7rem 6rem 6rem;
      }

      .introduction img {
        width: calc(100% + 6rem);
        max-width: 810px;
        left: -6rem;
        top: 0;
      }
      .introduction p {
        background: #fff;
        padding: 3.5rem 2rem;
        width: calc(100% + 6rem);
        position: relative;
        top: -10px;
        left: 0;
      }
      .interview {
          position: relative;
          padding: 6rem 20px;
      }
      #interview .interview {
          position: relative;
          padding: 0 20px;
      }
      #interview .bg-blue, #interview .bg-blue .flex2 {
        display: block;
      }
      .bx_benefits {
          width: calc(100% - 40px);
          margin-left: 20px;
      }
      .ttl_benefits {
        margin-left: 20px;
      }
      .benefits {
          padding: 15rem 0 1rem;
      }
      .entry .flex2 {
          flex-direction: column;
          padding: 4rem;
        }
      .entry .flex2 li {
          width: 100%;
        }
      .entry .flex2 li a {
          padding: 2rem 0;
        }
      .btn-view {margin-right: 0;}
      .content {
          margin-top: 80px;
      }
      .content .ttl {
        padding: 70px 0 0 0
      }
      .content h1 {
        font-size: 75px;
        margin: 0 0 1rem 10px;
        bottom: -55px;
    }
      .content h1.ttl-s {
        font-size: clamp(34px, 7vw, 46px);
        bottom: -32px;
    }
    /* .fukidashi-wrap .box-8:before {
        width: 100%;
        left: calc(-20% + 10px);
        top: -10px;
        font-size: clamp(14px, 1vw + 0.5rem, 18px);
    } */
      #about .flex3 {
          flex-direction: initial;
      }
      .voice .flex2 li:first-child {
          padding: 1rem 0 0;
      }
      #interview .voice .flex2 li {
        width: 100%;
        height: auto;
        padding-bottom: 3rem;
      }
      #interview .bg-blue .flex2 li {
        width: 100%;
      }
      #interview .bg-blue .flex2 img {
        height: 260px;
        margin-bottom: 2rem;
      }
      #interview .bg-blue .flex2 .right {
        padding: 0rem 2.5rem 2rem 3rem;
      }

      .ttl04:after {
        margin: 2rem auto 4rem;
    }
    .bx-gray {
      padding: 4rem 2rem;
    }
    #interview .interview_img01 {
      width: 100%;
    }
    #interview .bx-interview {
      bottom: 20px;
      left: 2rem;
    }
    #interview .bx-interview span {
       font-size: clamp(18px, 1vw + 1rem, 28px);
       margin-left: 10px;
    }

    #interview .bx-interview .title::after {
        content: '';
        width: 220px;
        height: 140px;
        bottom: -8rem;
        left: calc(100% - 170px);
    }
    .li-voice, .li-voice2 {
        margin: 0 2rem;
    }
    #breadcrumb {
        margin-right: 10px;
        padding-top: 0;
        font-size: 12px;
    }
    .timeline {
      font-size: 16px;
    }
    .btn02 {
        padding: 20px 10px;
        font-size: 20px;
    }
    .voice-movie {
      margin: 1rem auto 5rem;
    }
    #division .content-wrap {
      padding: 0 10px;
    }
    #message .voice-movie {
      margin: 2rem auto 5rem;
    }
    #message .flex2 {
      flex-direction: column;
      width: 100%;
    }
    #message .flex2 li {
      width: 100%;
    }
    .message .name {
      padding-top: 10px;
      padding-left: 10px;
    }
    .fukidashi {
      text-align: left;
      font-size: 14px;
      line-height: 1.8;
      padding: 2rem 1.2rem;
    }
    .timeline::before {
      height: calc(100% - 10px);
    }
      
      .mb2 {margin-bottom: 1rem;}
      .mb3 {margin-bottom: 1.5rem;}
      .mb4 {margin-bottom: 2rem;}
      .mb6 {margin-bottom: 3rem;}
      .mb8 {margin-bottom: 4rem;}
      .mb10 {margin-bottom: 5rem;}
  }
 @media (max-width: 576px) {
  .top-message {
          padding: 3rem 0 12rem;
      }
  .content h1 {
      font-size: 55px;
      margin: 0 0 1rem 10px;
      bottom: -40px;
  }
  .introduction h2 {top: -10rem;}
  .interview h2 {top: -9rem;}
  }
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* reveal base */
.reveal {
  opacity: 0;
  transform: translateY(20px); /* 上からふわっと = 下から20px上がる */
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 子要素に段階的ディレイを配るときに使う（JSが変数を付与） */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* アニメを極力抑制（ユーザー設定尊重） */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}