@charset "UTF-8";

/* --------------------------------------------------
  
-------------------------------------------------- */

#mv {}
#mv .mv-inner { width: 100%; aspect-ratio: 16/9;}
#mv .mv-inner iframe { width: 100%; height: 100%; }

/* 仮 */
/*
#mv { height: 80vh; background: #ccc; }
*/

@media screen and (max-width: 768px) {
}

/* --------------------------------------------------
  
-------------------------------------------------- */

main { padding-top: 80px; background: url(../img/common/background.png); }

@media screen and (max-width: 768px) {
}

/* --------------------------------------------------
  キャンペーン
-------------------------------------------------- */

#campaign { margin-bottom: 60px; width: 100vw; overflow: hidden; }
#campaign .swiper-slide img { width: 100%; height: auto; }

@media screen and (max-width: 768px) {
}


/* --------------------------------------------------
  お知らせ
-------------------------------------------------- */

#news { margin: 0 auto 75px; padding: 25px; max-width: 880px; background: #fff; }
#news .inner {}
#news h2 { margin-bottom: 20px; color: var(--primary); font-size: 1.7rem; letter-spacing: .1em; line-height: 1; }
#news h2::before { content: 'NEWS'; margin-right: 10px; font-family: "Open Sans", sans-serif; font-size: 2.9rem; font-weight: 700; letter-spacing: 0; }
#news ul { margin-bottom: 20px; border-top: solid 1px #e6e6e6; list-style: none; }
#news li { padding: 10px 5px; border-bottom: solid 1px #e6e6e6; display: flex; gap: 20px; }
#news li time { white-space: nowrap; }
#news li a {}
#news .more { display: flex; justify-content: end; }
#news .more a { color: var(--primary); font-size: 1.7rem; font-weight: bold; display: flex; align-items: center; gap: 5px; }
#news .more img { height: 1.7rem; filter: brightness(0) saturate(100%) invert(89%) sepia(9%) saturate(1978%) hue-rotate(103deg) brightness(81%) contrast(81%); }

@media screen and (max-width: 768px) {
  #news { margin: 0 10px 50px; padding: 15px; }
  #news li { flex-direction: column; gap: 5px 0; }
  #news .more a { font-size: 1.6rem; }
}

/* --------------------------------------------------
  メニュー
-------------------------------------------------- */

#menu { margin: 0 auto 170px; max-width: 880px; }
#menu ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px; }
#menu li { width: 276px; height: 276px; border-radius: 10px; overflow: hidden; }
#menu li:nth-child(odd) { background: var(--secondary); }
#menu li:nth-child(even) { background: var(--primary); }
#menu li a { padding: 30px 0; color: #111; font-size: 3.1rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; display: flex; align-items: center; justify-content: center; position: relative; }
#menu li a:hover { text-decoration: none; }
#menu li a:hover::before { content: ''; margin: -75px 0 0 -75px; width: 150px; height: 150px; border: solid 4px #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; opacity: 1; animation: 1s circle forwards; }
#menu li figure { display: flex; flex-direction: column-reverse; }
#menu li figure div { margin-top: auto; height: 112px; display: flex; align-items: end; justify-content: center; }
#menu li figcaption { height: 90px; text-align: center; display: flex; align-items: center; justify-content: center; }
#menu li:nth-child(1) figure img { width: 118px; }
#menu li:nth-child(2) figure img { width: 110px; }
#menu li:nth-child(3) figure img { width: 145px; }
#menu li:nth-child(4) figure img { width: 66px; }
#menu li:nth-child(5) figure img { width: 132px; }
#menu li:nth-child(6) figure img { width: 104px; }

@media screen and (max-width: 768px) {
  #menu { margin: 0 auto 80px; padding: 0 10px; }
  #menu ul { gap: 1%; }
  #menu li { margin-bottom: 2%; width: 49%; height: auto; }
  #menu li a { font-size: 2rem; letter-spacing: 0; }
  #menu li figure div { height: 70px; }
  #menu li figure img { width: auto; height: 60px; }
  #menu li figcaption { height: 60px; }
}

@keyframes circle {
  0% { transform: scale(0); }
	100% { opacity: 0; transform: scale(2); }
}

/* --------------------------------------------------
  採用情報
-------------------------------------------------- */

#recruit { padding-bottom: 120px; background: linear-gradient(transparent 0 70px, var(--quaternary) 70px 100%); position: relative; }
#recruit::after { content: ''; width: 100%; height: 245px; background: #fff; position: absolute; bottom: 0; }
#recruit .inner { margin: 0 auto; max-width: 880px; position: relative; z-index: 2; }
#recruit h2 { padding: 20px 45px; width: 298px; background: #000; border-radius: 25px; color: #fff; font-size: 2.3rem; letter-spacing: .1em; line-height: 1; display: flex; flex-direction: column-reverse; gap: 10px; position: absolute; left: -25px; top: -50px; }
#recruit h2::after { content: 'RECRUIT'; font-family: "Open Sans", sans-serif; font-size: 5rem; font-weight: 700; letter-spacing: 0; }
#recruit .recruit { margin-bottom: 25px; padding: 30px 20px 18px 40px; background: #fff; border: solid 3px #000; border-radius: 25px; display: flex; align-items: end; gap: 20px; }
#recruit .recruit-text { margin: 60px 0 20px; }
#recruit .recruit-text strong { font-size: 4.5rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; display: block; }
#recruit .recruit-text p { margin: 15px 0 30px; font-size: 1.8rem; }
#recruit .recruit-text a { padding: 10px 30px; background: var(--quaternary); border: solid 2px #000; border-radius: 100vw; color: #111; font-size: 2.4rem; font-weight: 700; letter-spacing: .1em; display: flex; align-items: center; gap: 10px: }
#recruit .recruit-text a img { height: 24px; }
#recruit .recruit-text a:hover { text-decoration: none; }
#recruit .recruit-text a:hover img { transform: translateX(5px); }
#recruit .recruit-image { flex-shrink: 0; }

@media screen and (max-width: 768px) {
  #recruit .inner { padding: 0 20px; }
  #recruit h2 { padding: 15px 30px; width: auto; border-radius: 10px; font-size: 1.6rem; left: 5px; top: 0; transform: translateY(-50%); }
  #recruit h2::after { font-size: 2.8rem; }
  #recruit .recruit { padding: 60px 20px 30px; flex-direction: column; gap: 10px 0; }
  #recruit .recruit-text { margin: 0 0 20px; }
  #recruit .recruit-text strong { font-size: 2.4rem; }
  #recruit .recruit-text p { margin: 10px 0; font-size: 1.5rem; }
  #recruit .recruit-text a { font-size: 1.8rem; letter-spacing: 0; justify-content: center; }
}

/* --------------------------------------------------
  インタビュー
-------------------------------------------------- */

#interview h3 { margin-bottom: 15px; font-size: 3.375rem; line-height: 1; display: flex; justify-content: center; gap: 20px; }
#interview h3::before, #interview h3::after { content: ''; width: 3px; height: 40px; background: #000; }
#interview h3::before { transform: rotate(-30deg); }
#interview h3::after { transform: rotate(30deg); }
#interview ul { list-style: none; display: flex; justify-content: center; gap: 14px; }
#interview li { width: 433px; padding:; background: #fff; border: solid 3px #000; border-radius: 25px; overflow: hidden; }
#interview a { padding: 20px 20px 50px; color: #111; display: block; position: relative; }
#interview a * { line-height: 1; }
#interview a:hover { text-decoration: none; }
#interview a:hover img { opacity: 1; }
#interview .interview { font-family: "Open Sans", sans-serif; font-size: 2.6rem; font-weight: 700; display: flex; gap: 8px; }
#interview .interview img { width: 26px; height: 26px; display: block; }
#interview .no { margin: 10px 0 15px; font-size: 9.2rem; font-weight: 600; letter-spacing: -.02em; }
#interview .interview-image { position: absolute; right: 0; bottom: 0; }
#interview strong { margin-bottom: 10px; font-size: 2.3rem; display: block; }
#interview p { font-size: 1.7rem; }
#interview li:nth-child(1) { background: linear-gradient(to top, var(--secondary) 0 34px, #fff 34px 100%); }
#interview li:nth-child(1) .interview, #interview li:nth-child(1) .no { color: #d1e6bb; }
#interview li:nth-child(2) { background: linear-gradient(to top, var(--primary) 0 34px, #fff 34px 100%); }
#interview li:nth-child(2) .interview, #interview li:nth-child(2) .no { color: #b2dfd4; }


@media screen and (max-width: 768px) {
  #interview h3 { font-size: 2rem; }
  #interview h3::before, #interview h3::after { height: 30px; }
  #interview ul { flex-direction: column; }
  #interview li { width: 100%; }
  #interview .interview { font-size: 2rem; }
  #interview .interview img { width: 20px; height: 20px; }
  #interview .no { font-size: 6rem; }
  #interview .interview-image { max-height: 200px; }
  #interview strong { font-size: 1.8rem; }
  #interview p { font-size: 1.5rem; }
}