@charset "UTF-8";
/*==================================================
** index
==================================================*/
@keyframes zoomanime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fill {
  to {
    fill: #ef363c;
  }
}
body {
  background: #fff;
}

/*-----------------------------------
  MVL
-----------------------------------*/
#mvl {
  height: 730px;
  position: relative;
}
@media screen and (max-width: 767px) {
  #mvl {
    height: auto;
    padding-top: 60px;
  }
}
#mvl .mvl-catch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  padding-block: 100px 171px;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-catch {
    padding-block: 60px 102px;
  }
}
#mvl .mvl-catch-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#mvl .mvl-catch-txt {
  width: min(65.6363636364vw, 722px);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-inline: auto;
  opacity: 0;
  animation: fadeIn 1.2s ease 0.8s forwards;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-catch-txt {
    width: min(77.0666666667vw, 578px);
  }
}
#mvl .mvl-slider {
  overflow: hidden;
  height: 100%;
}
#mvl .mvl-slider-pht {
  width: 100%;
  height: 100%;
}
#mvl .mvl-slider-pht-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mvl .mvl-subslider {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  padding-block: 5px;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-subslider {
    position: static;
    padding-block: 6px;
  }
}
#mvl .mvl-subslider-wrap {
  display: flex;
  gap: 0 10px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-subslider-wrap {
    gap: 0 3px;
  }
}
#mvl .mvl-subslider-list {
  display: flex;
  gap: 0 5px;
  animation: infinity-scroll-right 90s infinite linear 0.5s both;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-subslider-list {
    gap: 0 3px;
  }
}
#mvl .mvl-subslider-item {
  width: 180px;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-subslider-item {
    width: 120px;
  }
}
#mvl .mvl-subslider-img {
  width: 100%;
}
#mvl .mvl-ribbon {
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 341.5px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-ribbon {
    bottom: -47px;
    height: 226.5px;
  }
}
#mvl .mvl-ribbon-item {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  aspect-ratio: 300/31;
  width: min(262.5806451613vw, 3256px);
  max-width: none;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-ribbon-item {
    aspect-ratio: 300/35;
    width: min(520.8vw, 1953px);
  }
}
#mvl .mvl-ribbon-pc-line {
  fill: none;
  stroke: #ef363c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
}
#mvl .mvl-ribbon-pc-txt {
  fill: transparent;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-ribbon-pc {
    display: none;
  }
}
#mvl .mvl-ribbon-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-ribbon-sp {
    display: block;
    transform: none;
    left: calc(-1 * min(162.9333333333vw, 611px));
  }
  #mvl .mvl-ribbon-sp-line {
    fill: none;
    stroke: #ef363c;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
  }
  #mvl .mvl-ribbon-sp-txt {
    fill: transparent;
  }
}
#mvl .mvl-ribbon.move .mvl-ribbon-pc-line {
  animation: draw-line 4s ease-in-out forwards;
}
#mvl .mvl-ribbon.move .mvl-ribbon-pc-txt {
  animation: draw-fill 1s ease-in-out 3s forwards;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-ribbon.move .mvl-ribbon-sp-line {
    animation: draw-line 4s ease-in-out forwards;
  }
  #mvl .mvl-ribbon.move .mvl-ribbon-sp-txt {
    animation: draw-fill 1s ease-in-out 3s forwards;
  }
}
#mvl .swiper-slide-active .mvl-slider-pht-img,
#mvl .swiper-slide-duplicate-active .mvl-slider-pht-img,
#mvl .swiper-slide-prev .mvl-slider-pht-img {
  animation: zoomanime 8s linear 0s normal both;
}

/*-----------------------------------
  Prologue
-----------------------------------*/
#topPrologue {
  background: #f6f5f2;
  padding-block: 130px 70px;
  position: relative;
  /* 浮遊アニメーションの定義 */
  /* 各図形への適用 */
  /* SVG自体の設定 */
  /* 線の設定（前回と同じ） */
  /* アニメーション発火時 */
}
@media screen and (max-width: 767px) {
  #topPrologue {
    padding-block: 100px 36px;
  }
}
#topPrologue::after {
  content: "";
  display: block;
  width: 100%;
  height: 207px;
  background: url("../img/common/bg_arc_btm.svg") no-repeat center bottom/2700px auto, #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
@keyframes floating {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg); /* 15px上に移動し、2度傾く */
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
#topPrologue .deco {
  will-change: transform; /* ブラウザの描画を最適化 */
}
#topPrologue .deco1 {
  /* 3秒かけてループ、イーズインアウトで滑らかに */
  animation: floating 3s ease-in-out infinite;
}
#topPrologue .deco2 {
  /* deco1より少し遅く（4秒）、開始を1秒遅らせることでバラバラな動きにする */
  animation: floating 4s ease-in-out infinite;
  animation-delay: 1s;
}
#topPrologue .shirt-svg {
  width: 100%; /* 親要素(.deco1など)の幅に合わせる */
  height: auto; /* 高さは比率を維持 */
  display: block; /* 余白消し */
}
#topPrologue .shirt-svg path {
  stroke: #ea0029; /* 色 */
  stroke-width: 1.5px;
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1s ease-in-out;
}
#topPrologue .shirt-svg.active path {
  stroke-dashoffset: 0 !important;
}
#topPrologue .deco {
  position: absolute;
}
#topPrologue .prologuebox {
  position: relative;
}
#topPrologue .prologuebox-txt p {
  margin: 0;
  text-align: center;
  font-size: 2rem;
  line-height: 3;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topPrologue .prologuebox-txt p {
    font-size: min(3.7333333333vw, 1.4rem);
    line-height: 2.4;
    letter-spacing: 0.03em;
  }
}
#topPrologue .prologuebox-deco .deco1 {
  width: min(15%, 180px);
  left: min(5.1666666667vw, 62px);
  top: min(7.0833333333vw, 85px);
}
@media screen and (max-width: 767px) {
  #topPrologue .prologuebox-deco .deco1 {
    width: 20.4vw;
    left: min(0.4vw, 1px);
    bottom: calc(-1 * min(34.4vw, 129px));
    top: auto;
  }
}
#topPrologue .prologuebox-deco .deco2 {
  width: min(11.6666666667%, 140px);
  right: min(5.6666666667vw, 68px);
  bottom: calc(-1 * min(15.4166666667vw, 185px));
}
@media screen and (max-width: 767px) {
  #topPrologue .prologuebox-deco .deco2 {
    width: 15.0666666667vw;
    right: min(1.4666666667vw, 6px);
    bottom: calc(-1 * min(35.0666666667vw, 132px));
  }
}
#topPrologue .aboutbox {
  position: relative;
  margin-top: 64px;
  /* アクティブになったら線を描く（offsetを0にする） */
}
@media screen and (max-width: 767px) {
  #topPrologue .aboutbox {
    margin-top: 70px;
  }
}
#topPrologue .aboutbox .shirt-svg {
  width: 200px; /* サイズは適宜変更 */
  height: auto;
  margin: 50px auto;
  display: block; /* 念のためブロック要素に */
}
#topPrologue .aboutbox .shirt-svg path {
  stroke: #e60012; /* 線の色 */
  stroke-width: 2;
  fill: transparent; /* 塗りなし */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* アニメーションの設定：2秒かけて描画 */
  transition: stroke-dashoffset 2s ease-in-out;
}
#topPrologue .aboutbox .shirt-svg.active path {
  stroke-dashoffset: 0 !important;
}
#topPrologue .aboutbox-pht {
  margin-inline: auto;
  width: min(63.2vw, 696px);
}
@media screen and (max-width: 767px) {
  #topPrologue .aboutbox-pht {
    width: auto;
    margin-inline: -3.5%;
  }
}
#topPrologue .aboutbox-txt p {
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #topPrologue .aboutbox-txt p {
    margin-top: 15px;
    font-size: min(3.4666666667vw, 1.3rem);
  }
}
#topPrologue .aboutbox-deco .deco1 {
  width: min(13.0833333333%, 157px);
  left: min(4.1666666667vw, 50px);
  top: min(16.9166666667vw, 203px);
}
#topPrologue .aboutbox-deco .deco2 {
  width: min(14.9166666667%, 179px);
  right: min(2vw, 24px);
  bottom: min(4.1666666667vw, 50px);
}
@media screen and (max-width: 767px) {
  #topPrologue .aboutbox-deco {
    display: none;
  }
}
#topPrologue .aboutbox .link-more {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  #topPrologue .aboutbox .link-more {
    margin-top: 20px;
  }
}

/*-----------------------------------
  Biz
-----------------------------------*/
#topBiz {
  margin-top: 112px;
}
#topBiz .bizbox {
  display: grid;
  grid-template-columns: 1fr 52.2580645161%;
  justify-content: space-between;
  align-items: center;
  gap: 0 5.1%;
}
@media screen and (max-width: 767px) {
  #topBiz .bizbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
#topBiz .lbox {
  max-width: max-content;
}
@media screen and (max-width: 767px) {
  #topBiz .lbox {
    display: contents;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #topBiz .h2 {
    order: 1;
    width: 100%;
  }
}
#topBiz .txtbox {
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  #topBiz .txtbox {
    order: 3;
    width: 100%;
    margin-top: 30px;
  }
}
#topBiz .txtbox .catch {
  margin-top: 0;
  font-size: min(2.4217961655vw, 2.4rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #ef363c;
}
@media screen and (max-width: 767px) {
  #topBiz .txtbox .catch {
    font-size: min(4.8vw, 1.8rem);
  }
}
#topBiz .txtbox .txt {
  margin-top: 25px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topBiz .txtbox .txt {
    margin-top: 20px;
    font-size: 1.3rem;
  }
}
#topBiz .txtbox .link-more {
  margin-top: 35px;
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  #topBiz .txtbox .link-more {
    margin-top: 5vw;
    margin-right: 0px;
  }
}
#topBiz .phtbox {
  margin-right: -2%;
  /* Rの形状マスク設定 */
}
@media screen and (max-width: 767px) {
  #topBiz .phtbox {
    order: 2;
    margin: 30px auto 0;
    width: 89.2%;
  }
}
#topBiz .phtbox .r-slider-container {
  width: 100%;
  max-width: 649px;
  aspect-ratio: 1293/1031;
  /* SVGマスク設定 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1293 1031'%3E%3Cpath d='M2007.88,1175.15a21.546,21.546,0,0,1-17.52-9.05l-50.76-71.54a17.248,17.248,0,0,0-31.32,9.98v49.13a21.5,21.5,0,0,1-21.47,21.48h-514.2a21.51,21.51,0,0,1-21.48-21.48V165.978a21.506,21.506,0,0,1,21.48-21.478h657.47c150.27,0,245.76,60.7,299.41,111.616,56.29,53.171,123.37,148.117,123.37,298.636,0,78.257-18.78,149.162-55.82,210.743a17.248,17.248,0,0,0,.57,18.667L2643.48,1141.5a21.48,21.48,0,0,1-17.69,33.65H2007.88Z' transform='translate(-1351.12 -144.5)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1293 1031'%3E%3Cpath d='M2007.88,1175.15a21.546,21.546,0,0,1-17.52-9.05l-50.76-71.54a17.248,17.248,0,0,0-31.32,9.98v49.13a21.5,21.5,0,0,1-21.47,21.48h-514.2a21.51,21.51,0,0,1-21.48-21.48V165.978a21.506,21.506,0,0,1,21.48-21.478h657.47c150.27,0,245.76,60.7,299.41,111.616,56.29,53.171,123.37,148.117,123.37,298.636,0,78.257-18.78,149.162-55.82,210.743a17.248,17.248,0,0,0,.57,18.667L2643.48,1141.5a21.48,21.48,0,0,1-17.69,33.65H2007.88Z' transform='translate(-1351.12 -144.5)'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: #f0f0f0;
}
#topBiz .phtbox .swiper-staff-r {
  width: 100%;
  height: 100%;
}
#topBiz .phtbox .swiper-staff-r .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/*-----------------------------------
  Products
-----------------------------------*/
#topProducts {
  margin-top: 95px;
}
@media screen and (max-width: 767px) {
  #topProducts {
    margin-top: 90px;
  }
}
#topProducts .productbox {
  display: grid;
  grid-template-columns: 47.2580645161% 1fr;
  grid-template-areas: "image text";
  align-items: center;
  gap: 0 5.1%;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
#topProducts .productbox .rbox {
  grid-area: text;
  max-width: max-content;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .rbox {
    display: contents;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .h2 {
    order: 1;
    width: 100%;
  }
}
#topProducts .productbox .txtbox {
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .txtbox {
    order: 3;
    margin-top: 30px;
    width: 100%;
  }
}
#topProducts .productbox .txtbox .catch {
  margin-top: 0;
  font-size: min(2.4217961655vw, 2.4rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #ef363c;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .txtbox .catch {
    font-size: min(4.8vw, 1.8rem);
  }
}
#topProducts .productbox .txtbox .txt {
  margin-top: 25px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .txtbox .txt {
    margin-top: 20px;
    font-size: 1.3rem;
  }
}
#topProducts .productbox .txtbox .link-more {
  margin-top: 35px;
  margin-right: 30px;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .txtbox .link-more {
    margin-top: 5vw;
    margin-right: 0px;
  }
}
#topProducts .productbox .phtbox {
  grid-area: image;
}
@media screen and (max-width: 767px) {
  #topProducts .productbox .phtbox {
    order: 2;
    width: 89.6%;
    margin-inline: auto;
  }
}
#topProducts .itochoubox {
  margin: 130px auto 0;
  max-width: 800px;
  border: 1px solid #ef363c;
  border-radius: 10px;
  padding-block: 49px 30px;
  padding-inline: 4.1% 5.6%;
  display: grid;
  grid-template-columns: 64.5% 26.6%;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #topProducts .itochoubox {
    margin-top: 60px;
    max-width: 100%;
    border-radius: 5px;
    padding-block: 30px;
    padding-inline: 3%;
    grid-template-columns: 1fr;
    position: relative;
  }
}
#topProducts .itochoubox .txtbox p {
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topProducts .itochoubox .txtbox p {
    font-size: 1.3rem;
    letter-spacing: normal;
    text-align: center;
  }
}
#topProducts .itochoubox .txtbox .link-more {
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  #topProducts .itochoubox .txtbox .link-more {
    margin-top: 0;
    position: absolute;
    right: 3.6%;
    bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  #topProducts .itochoubox .phtbox {
    margin: 25px auto 0;
    width: 90px;
  }
}

/*-----------------------------------
  Under Contents (Video Mask)
-----------------------------------*/
#topUnderContents {
  margin-top: 60px;
}
#topUnderContents .video-container {
  width: 100%;
  height: auto;
  position: relative;
  /* --- 1. マスク設定を親要素へ移動 --- */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  /* PC用マスク */
  -webkit-mask-image: url("../img/index/video-mask-pc.svg");
  mask-image: url("../img/index/video-mask-pc.svg");
  /* SP用マスク */
  /* ドット・砂嵐のオーバーレイ */
}
@media screen and (max-width: 767px) {
  #topUnderContents .video-container {
    -webkit-mask-image: url("../img/index/video-mask-sp.svg");
    mask-image: url("../img/index/video-mask-sp.svg");
  }
}
#topUnderContents .video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/index/mask_movie.png);
  background-size: 6px;
  opacity: 0.5;
  z-index: 10;
  pointer-events: none; /* マウス操作がビデオに届くように追加 */
}
#topUnderContents .video-container video {
  width: 100%;
  display: block;
  object-fit: cover;
  /* video単体へのマスク指定は削除します */
}
#topUnderContents .under-mainpht {
  width: 100%;
}
#topUnderContents .under-mainpht-img {
  width: 100%;
}
#topUnderContents .under-contents {
  background: #f6f5f2;
  padding-block: 90px;
}
@media screen and (max-width: 767px) {
  #topUnderContents .under-contents {
    padding-block: 70px;
  }
}

/*-----------------------------------
  Topics
-----------------------------------*/
#topTopics .ttlbox .txt {
  margin-top: 30px;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topTopics .ttlbox .txt {
    text-align: left;
    margin-top: 25px;
    font-size: 1.3rem;
    line-height: 1.8;
  }
}
#topTopics .topicssec .topicsslider {
  margin-top: 40px;
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  #topTopics .topicssec .topicsslider {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}
@media screen and (max-width: 767px) {
  #topTopics .topicssec .topicsslider {
    margin: 30px -7.3% 0;
    padding-inline: 7.3%;
  }
}
#topTopics .topicssec .topicsslider-item {
  width: 320px;
}
@media screen and (max-width: 767px) {
  #topTopics .topicssec .topicsslider-item {
    width: 78.2%;
  }
}
#topTopics .topicssec .topicsslider-a {
  display: block;
}
#topTopics .topicssec .topicsslider-a:hover {
  opacity: 1;
}
#topTopics .topicssec .topicsslider-a:hover .topicsslider-img {
  scale: 1.1;
  transition: all 0.8s;
}
#topTopics .topicssec .topicsslider-pht {
  overflow: hidden;
  aspect-ratio: 640/300;
  position: relative;
}
#topTopics .topicssec .topicsslider-pht::before {
  content: "";
  width: 61px;
  aspect-ratio: 122/46;
  background: url("../img/common/logo_note.svg") no-repeat center center/contain, #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#topTopics .topicssec .topicsslider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}
#topTopics .topicssec .topicsslider-txt {
  margin-top: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topTopics .topicssec .topicsslider-txt {
    font-size: 1.2rem;
  }
}
#topTopics .topicssec .topicsslider-btm {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 30px;
}
@media screen and (max-width: 767px) {
  #topTopics .topicssec .topicsslider-btm {
    align-items: flex-start;
    gap: 0 9%;
  }
}
#topTopics .topicssec .topicsslider-scrollbar {
  position: static;
  background: transparent;
  border: 1px solid #999;
  border-radius: 0;
  height: 8px;
}
@media screen and (max-width: 767px) {
  #topTopics .topicssec .topicsslider-scrollbar {
    margin-top: 15px;
    height: 4px;
  }
}
#topTopics .topicssec .topicsslider-scrollbar .swiper-scrollbar-drag {
  background: #999;
  border-radius: 0;
  cursor: pointer;
}
#topTopics .topicssec .link-more {
  margin: 0 0 0 auto;
}
#topTopics .newssec {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec {
    margin-top: 40px;
  }
}
#topTopics .newssec .newsttl {
  margin-top: 0;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newsttl {
    font-size: 1.3rem;
  }
}
#topTopics .newssec .newslist {
  margin-top: 25px;
  border-top: 1px solid #333;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newslist {
    margin-top: 5px;
  }
}
#topTopics .newssec .newslist-li {
  border-bottom: 1px solid #333;
}
#topTopics .newssec .newslist-a {
  display: grid;
  grid-template-columns: 120px 125px 1fr;
  gap: 0 15px;
  align-items: center;
  padding-block: 30px 26px;
  padding-inline: 1.8%;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newslist-a {
    /* カテゴリを85px固定、残りを日付のスペースにする */
    grid-template-columns: 23vw 1fr;
    padding-block: 15px 11px;
    padding-inline: 0;
    gap: 6px 15px; /* 縦の隙間を6px、横(カテゴリと日付の間)を15pxに */
  }
}
#topTopics .newssec .newslist-cat {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fb654d;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 3px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newslist-cat {
    font-size: 1.2rem;
    padding: 3px 0;
    width: 100%; /* 85pxの幅いっぱいに背景色を広げて中央揃えにする */
  }
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newslist-date {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .newslist-ttl {
    font-size: 1.3rem;
    letter-spacing: normal;
    grid-column: 1/-1;
  }
}
#topTopics .newssec .link-more {
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  #topTopics .newssec .link-more {
    margin-top: 20px;
    justify-content: flex-end;
  }
}

/*-----------------------------------
  Recruit
-----------------------------------*/
#topRecruit {
  margin-top: 125px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #topRecruit {
    margin-top: 30px;
  }
}
#topRecruit .wrap {
  position: static;
}
#topRecruit .recruitbox {
  max-width: 747px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 36.1%;
  justify-content: space-between;
  gap: 0 3.2%;
}
@media screen and (max-width: 767px) {
  #topRecruit .recruitbox {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
#topRecruit .lbox {
  max-width: max-content;
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  #topRecruit .lbox {
    display: contents;
    max-width: 100%;
    margin-top: 25px;
  }
}
@media screen and (max-width: 767px) {
  #topRecruit .h2 {
    order: 1;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #topRecruit .txtbox {
    order: 3;
    width: 100%;
  }
}
#topRecruit .txtbox .txt {
  margin-top: 40px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #topRecruit .txtbox .txt {
    margin-top: 25px;
    font-size: 1.3rem;
    text-align: center;
  }
}
#topRecruit .txtbox .link-more {
  justify-content: flex-start;
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  #topRecruit .txtbox .link-more {
    margin-top: 5vw;
    justify-content: center;
  }
}
#topRecruit .phtbox {
  background-image: url(../img/index/index_recruit_bg.webp);
  background-repeat: no-repeat;
  /* スライダーとテキストの親要素 */
  /* 画像の上に重ねるテキストのスタイル */
}
@media screen and (max-width: 767px) {
  #topRecruit .phtbox {
    order: 2;
    margin: 18px auto 0;
    width: 68.1%;
    position: relative;
  }
}
#topRecruit .phtbox .recruit-visual-wrap {
  position: relative; /* 重ねるテキストの基準点 */
  width: 100%;
}
#topRecruit .phtbox .swiper-recruit {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0/25% 25% 0 0; /* 必要であれば上部のアーチ形状をCSSでつけることも可能です */
}
#topRecruit .phtbox .swiper-recruit .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
#topRecruit .phtbox .recruit-catch {
  position: absolute;
  bottom: 0; /* 下に配置 */
  left: 0;
  width: 100%;
  z-index: 2; /* スライダーよりも手前（上）に表示 */
  padding: 8% 10%; /* 画像の赤い余白に合わせて数値を調整してください */
  text-align: center;
  pointer-events: none; /* スワイプ操作の邪魔にならないようにする */
}
#topRecruit .phtbox .recruit-catch p {
  width: 100%;
  display: block;
}
#topRecruit .ribbon {
  width: 3256px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #topRecruit .ribbon {
    width: 521.0666666667vw;
    transform: none;
    left: -260.8vw;
    bottom: 9.3333333333vw;
  }
}
#topRecruit .ribbon-svg-line {
  fill: none;
  stroke: #ef363c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
}
#topRecruit .move .ribbon-svg-line {
  animation: draw-line 4s ease-in-out forwards;
}