/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ TOPページ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ---------------- TOPメイン画像 ------------------*/
.main__visual {
  position: relative;
  z-index: 0;
}

.main__visual .wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 105px;
}

.main__visual img {
  width: 100%;
  height: auto;
}

.main__visual .text01 {
  width: 100%;
  position: absolute;
  z-index: 1;
}

.main__visual .text02 {
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: -4%;
}

@media screen and (max-width: 1500px) {
  .main__visual .wrapper {
    padding-top: 80px;
  }

  .main__visual {
    background-size: contain;
  }

  .main__visual .con img {
    width: 100%;
  }

  .main__visual .con p br {
    display: none;
  }
} 

@media screen and (max-width: 768px) {
  .main__visual .wrapper {
    padding-top: 0;
  }

  .main__visual {
    width: 100%;
  }
} 


/* ---------------- top-slide ------------------*/

.top-slide {
  padding: 50px 0 130px 0;
  background-image: url("img/slide_bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
}

.top-slide .slider_inner {
  overflow: hidden;
}

.top-slide .slider_inner img {
  width: 100%;
}

.top-slide .slider_inner:nth-child(odd) {
  margin-top: 60px;
}

@media screen and (max-width: 1260px) {
  .top-slide {
    padding: 0 0 100px 0;
  }
}

@media screen and (max-width: 560px) {
  .top-slide {
    width: 100%;
    padding: 0 0 40px 0;
  }

  .prev_icon {
    width: 30px !important;
    left: 15px;
  }
  
  .next_icon {
    width: 30px !important;
    left: 60px;
  }

} 


/* ---------------- top-first ------------------*/

.top-first {
  padding: 140px 0 180px 0;
}

.top-first h2 {
  color: #EB7083;
  font-size: 6.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 30px;
}

.top-first p {
  color: #000;
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 2.6;
}

.top-first.r-img-con {
  margin-bottom: 0;
}

.top-first.r-img-con .text__area {
  width: 550px;
}

.top-first.r-img-con .image__area {
  width: 773px;
  margin-left: 13px;
}

.image__area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.fadein2 .image__left,
.fadein2 .image__right--top,
.fadein2 .image__right--bottom {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.0s ease;
  will-change: clip-path;
}

.fadein2 .image__left { transition-delay: 0s; }
.fadein2 .image__right--top { transition-delay: 0.35s; }
.fadein2 .image__right--bottom { transition-delay: 0.7s; }

.fadein2.scrollin .image__left,
.fadein2.scrollin .image__right--top,
.fadein2.scrollin .image__right--bottom {
  clip-path: inset(0 0 0 0);
}

/* 左の縦長 */
.image__left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右側を縦2分割 */
.image__right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 13px;
}

.image__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1500px) {
  .top-first.r-img-con .text__area {
    width: 50%;
  }

  .top-first.r-img-con .image__area {
    width: 45%;
  }
}

@media (max-width: 1260px) {
  .top-first {
    padding: 80px 0 100px 0;
  }

  .top-first h2 {
    font-size: 4.2rem;
  }

  .top-first p {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .top-first h2 {
    text-align: center;
  }

  .top-first.r-img-con {
    padding-bottom: 100px;
  }

  .top-first.r-img-con .text__area {
    width: 100%;
  }

  .top-first.r-img-con .image__area {
    width: 100%;
    display: grid;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .top-first {
    padding: 60px 0 100px 0;
  }

  .top-first.r-img-con {
    padding-bottom: 60px;
  }

  .top-first h2 {
    font-size: 3.2rem;
  }

  .top-first p {
    font-size: 1.6rem;
    line-height: 2.0;
  }
}

/* ---------------- recruit-tiles ------------------*/
.recruit-tiles {
  padding: 180px 0;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.tile img {
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}

@media (hover: hover) {
  .tile:hover img {
    transform: scale(1.08);
  }
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
  opacity: 0;
  transition: opacity .4s ease;
}

.tile:hover::after {
  opacity: 1;
}

.tile__label {
  opacity: 1;
}

/* 縦書きラベル */
.tile__label {
  position: absolute;
  top: 0;
  left: 40px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background-color: #fff;
  padding: 14px 8px;
  font-size: 22px;
  color: #111;
  letter-spacing: .25em;
}

.recruit-tiles__top.fadein .tile,
.recruit-tiles__grid.fadein .tile {
  opacity: 0;
  transition: opacity 0.45s ease;
  transition-delay: var(--tile-delay, 0s);
}

.recruit-tiles__top.fadein.scrollin .tile,
.recruit-tiles__grid.fadein.scrollin .tile {
  opacity: 1;
}

.recruit-tiles__top.fadein .tile__img,
.recruit-tiles__grid.fadein .tile__img {
  position: relative;
  display: block;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.0s ease;
  transition-delay: var(--tile-delay, 0s);
  will-change: clip-path;
}

.recruit-tiles__top.fadein.scrollin .tile__img,
.recruit-tiles__grid.fadein.scrollin .tile__img {
  clip-path: inset(0 0 0 0);
}

.recruit-tiles__top.fadein .tile__label,
.recruit-tiles__grid.fadein .tile__label {
  --label-delay: calc(var(--tile-delay, 0s) + 0.5s);
}

.recruit-tiles__top.fadein .tile__label .char,
.recruit-tiles__grid.fadein .tile__label .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-14px);
  transition: transform 0.4s ease, opacity 0.4s ease;
  transition-delay: calc(var(--label-delay, 0s) + var(--char-delay, 0s));
  will-change: transform, opacity;
}

.recruit-tiles__top.fadein.scrollin .tile__label .char,
.recruit-tiles__grid.fadein.scrollin .tile__label .char {
  opacity: 1;
  transform: translateY(0);
}

.recruit-tiles__top.fadein.scrollin .tile:nth-child(1) { --tile-delay: 0s; }
.recruit-tiles__top.fadein.scrollin .tile:nth-child(2) { --tile-delay: 0.5s; }

.recruit-tiles__grid.fadein.scrollin .tile:nth-child(1) { --tile-delay: 1.2s; }
.recruit-tiles__grid.fadein.scrollin .tile:nth-child(2) { --tile-delay: 1.7s; }
.recruit-tiles__grid.fadein.scrollin .tile:nth-child(3) { --tile-delay: 2.2s; }
.recruit-tiles__grid.fadein.scrollin .tile:nth-child(4) { --tile-delay: 2.7s; }
.recruit-tiles__grid.fadein.scrollin .tile:nth-child(5) { --tile-delay: 3.2s; }
.recruit-tiles__grid.fadein.scrollin .tile:nth-child(6) { --tile-delay: 3.7s; }

.recruit-tiles-pc {
  display: block !important;
}

.recruit-tiles-sp {
  display: none !important;
}


@media screen and (max-width: 1260px) {
  .recruit-tiles {
    padding: 100px 0;
  }

  .tile__label {
    font-size: 1.8rem;
  }

  .recruit-tiles-pc {
    display: none !important;
  }
  
  .recruit-tiles-sp {
    display: block !important;
  }
}

/* ===== PC（固定px） ===== */
@media (min-width: 1260px) {

  /* 1段目：585×2 を中央配置（真ん中が空かない） */
  .recruit-tiles__top {
    display: flex;
    gap: 30px;
    justify-content: center; /* ←ここが重要 */
    margin: 0 auto 30px;
    max-width: calc(585px * 2 + 30px);
    margin-top: 80px;
  }

  .tile--585 {
    width: 585px;
    height: 330px;
  }

  /* 2〜3段目：380×3 を中央配置 */
  .recruit-tiles__grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 380px);
    grid-auto-rows: 330px;
    justify-content: center; /* ←ここが重要 */
    margin: 0 auto;
    max-width: calc(380px * 3 + 30px * 2);
  }

  .tile--380 {
    width: 380px;
    height: 330px;
  }
}

/* ===== タブレット（2列） ===== */
@media (min-width: 600px) and (max-width: 1259px) {
  .recruit-tiles__top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
    }

  .recruit-tiles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tile {
    height: 260px;
    width: 100%;
  }
}

/* ===== スマホ（1列） ===== */
@media (max-width: 599px) {
  .recruit-tiles {
    padding: 60px 0;
  }

  .recruit-tiles__top {
    padding-bottom: 12px;
  }

  .recruit-tiles__top,
  .recruit-tiles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tile {
    height: 260px;
    width: 100%;
  }

  .tile__label {
    top: 12px;
    left: 12px;
    font-size: 16px;
  }
}

/* ---------------- お知らせ ------------------*/
.info {
  padding: 150px 0;
}

main .info h2 {
  margin-top: 25px;
  margin-bottom: 35px;
}

.info_con {
  width: 940px;
  font-weight: 600;
  margin-top: 10px;
}

.info_con .dac {
  font-size: 1.4rem;
}

.info_con .info_list {
  border-bottom: 1px solid #DCDBDB;
}

.info_con .info_list:last-child {
  border-bottom: none;
}

.info_con .info_list a {
  padding: 18px 10px 20px 10px;
  text-decoration: none;
  color: #333;
  display: block;
}

.info_con .info_list h3 {
  font-size: 1.8rem;
}

.info-all .info_con {
  width: 850px;
}

.info .btn a{
  background-color:#EB7083;
  display:block;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#000;
  font-weight:600;
  padding:12px 50px 12px 30px;
  border-radius:30px;
  font-size:1.3rem;
}

/* 背景スライド */
.info .btn a::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#F3ADCC;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
  z-index:-1;
  pointer-events:none;
}

/* アイコン固定表示 */
.info .btn a::after{
  content:"";
  position:absolute;
  top:50%;
  right:13px;
  width:24px;   /* 画像サイズに合わせて調整 */
  height:24px;  /* 画像サイズに合わせて調整 */
  transform:translateY(-50%);
  background:url(img/h-btn02.png) no-repeat center / contain;
  z-index:1;
  pointer-events:none;
}

/* hover時 */
.info .btn a:hover::before{
  transform:scaleX(1);
}

/* 背景色スライド（左→右）※背面に置く */
.info .btn a ::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#F3ADCC;/* hover時の色 */
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
  z-index:-1;              /* 文字より後ろ */
  pointer-events:none;
}

/* アイコンは最前面で固定表示（消えない） */
.info .btn a ::after{
  content:"";
  position:absolute;
  top:50%;
  right:13px;
  width:24px;              /* ←画像サイズに合わせて調整 */
  height:24px;             /* ←画像サイズに合わせて調整 */
  transform:translateY(-50%);
  background:url(img/h-btn02.png) no-repeat center / contain;
  z-index:1;
  pointer-events:none;
}

.info .btn a :hover::before{
  transform:scaleX(1);
}

.info .btn a:hover {
  background-color: #f0a3af;
}

@media screen and (max-width: 1260px) {
  .info {
    padding: 100px 0;
  }

  .info_con .title {
    width: 30%;
  }

  .info_con {
    width: 70%;
  }
}

@media screen and (max-width: 768px) {
  .info .fl{
    display: block;
  }

  .info .btn a {
    width: 180px;
  }

  .info .info_list a.fl {
    display: block;
  }

  main.sub .con-box .info_list a.fl {
    display: block;
  }
  
  .info-all .info_con {
    margin-bottom: 0;
  }

  .info_con {
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 3em;
  }

  .info_con .info_list a {
    padding: 25px;
  }

  .info_con .info_list h3 {
    margin-top: 10px;
    width: 100%;
  }
  
}

@media screen and (max-width: 560px) {
  main .info .sub-title h2 {
    font-size: 2.0rem;
  }

  .info {
    padding: 20px 0;
  }

  .info_con .info_list .bg01 {
    font-size: 1.2rem;
  }

  .info_con .info_list h3 {
    font-size: 1.5rem;
    border-bottom: none;
    margin-top: 0;
  }

  .info_con .info_list a {
    padding: 10px;
  }
}


/* ---------------- top-btn------------------*/

.top-btn {
  padding: 170px 0;
}

.top-btn li {
  width: 815px;
  margin: 10px 0;
}

.top-btn li a {
  transition: all 0.3s ease;
  background-image: url(img/top-btn-bg.png);
  background-repeat: no-repeat;
  background-position: right 32px center;
  background-color: #fff;
  font-weight: 600;
  font-size: 2.8rem;
}

.top-btn li a {
  overflow: hidden;
}

/* 画像の拡大準備 */
.top-btn li a img {
  transition: transform 0.3s ease;
}

.top-btn li a::after {
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;   /* 画像サイズに合わせて調整 */
  height: 24px;
  background: url(img/top-btn-bg.png) no-repeat center/contain;
  transition: transform 0.3s ease;
}

/* 元のbackground-imageは消す */
.top-btn li a {
  background-image: none;
  position: relative;
}

.top-btn li a span {
  display: block;
  font-size: 1.8rem;
  color: #EB7083;
}

/* =======================
   hover演出
======================= */

.top-btn li a:hover img {
  transform: scale(1.1);
}

.top-btn li a:hover::after {
  transform: translateY(-50%) rotate(90deg);
}

.top-btn li a span {
  display: block;
  font-size: 1.8rem;
  color: #EB7083;
}

.top-btn li .btn-title {
  margin-left: 32px;
}

.top-btn li {
  width: 815px;
  margin: 10px 0;
}


@media screen and (max-width: 1700px) {
  .top-btn li {
    width: 49.5%;
  }
}

@media screen and (max-width: 1600px) {
  .top-btn li img {
    width: 35%;
  }

  .top-btn li a {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 1260px) {
  .top-btn {
    padding: 100px 0;
  }

  .top-btn li a {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 1000px) {
  .top-btn ul.fl {
    display: block;
  }

  .top-btn li {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  .top-btn {
    padding: 60px 0;
  }

  .top-btn li .btn-title {
    margin-left: 10px;
  }

  .top-btn li a {
    font-size: 1.5rem;
  }

  .top-btn li a span {
    font-size: 1.3rem;
  }

  .top-btn li a::after {
    right: 5px;
  }
}