/* =========================
 Top
========================= */
.top{
position: relative;
z-index:1;
}

/* video */
.top-image{
width: 83%;
margin-left: auto; 
overflow: hidden; 
border-radius: 4rem 0 0 4rem;
}

.top-image video{
display: block;
width: 100%;
height: auto;
}

/* read copy */
.read-copy{
position: absolute;
left: 8.5%;
bottom: 17%;
z-index: 2;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 500;
line-height: 1;
}

.read-copy span{
display: inline-block;
background: #fff;
letter-spacing:.5rem;
padding: 1.4rem 1rem 1.4rem 2rem;
font-size:3.3rem;
margin-top:2rem;
}
.read-copy span:has(ruby){
padding: 2.5rem 1.5rem 1rem;
}

.read-copy i{
color: #FAABB1;
font-style: normal;
}

/* top-message */
.top-message{
max-width:960px;
margin:100px auto;
padding:0 20px;
font-size:20px;
line-height:2;
letter-spacing:0.05em;
color:#444;
position: relative;
z-index: 10;
}

ruby[data-ruby]::after {
transform: translate(-50%, -1.2em);
}

/* ============ */
@media (max-width: 767px){
.top{
border:0px #FF0000 solid;
padding-bottom:9rem;
}
.top-image{
width: 95%;
margin-left: auto; 
border-radius: 2rem 0 0 2rem;
}
.read-copy{
left: 10%;
bottom:0;
}
.read-copy span{
display: inline-block;
padding: 1rem 1.5rem;
font-size:3.4rem;
margin-top:2rem;
border:0px #FF0000 solid;
letter-spacing:.25rem;
}
.top-message{
font-size:unset;
}

}

@media (max-width:599px){
.read-copy span{
font-size:3rem;
margin-top:1rem;
}
}
@media (max-width:499px){
.top{
padding-bottom:7rem;
}
.read-copy span{
font-size:2.5rem;
margin-top:1rem;
}
}
@media (max-width:399px){
.read-copy span{
font-size:2rem;
margin-top:1rem;
}
}


/* =========================
   ABOUT
========================= */
.about {
position: relative;
z-index:1;
overflow:hidden;
padding: 0rem 0 10rem 0;
border:0px #FF0000 solid;
}

.about article{
display: grid;
grid-template-columns: 5.8fr 4.2fr;
gap: 6rem;
align-items: center;
width:85%;
margin:0 auto;
position: relative;
border:0px #FF0000 solid;
}

.about .col1{
order: 2;
}

.about .col2{
order: 1;
}

.about section{
position:relative;
z-index:1;
}

/* 画像 */
.about .image img{
display: block;
width: 100%;
height: auto;
border-radius: 3rem;
}


/* ============ */
@media (max-width: 767px){
.about{
padding: 10rem 0 10rem 0;
}
.about article{
grid-template-columns: 1fr;
width: 90%;
gap: 4rem;
}
.about .col1{
order: 1;
}
.about .col2{
order: 2;
}
.about .link-button{
text-align:right;
}
.about .image img{
border-radius: 2rem;
}
}


/* =========================
   BUSINESS
========================= */
.business{
position: relative;
overflow: hidden;
padding: 4rem 0 25rem;
border:0px #FF0000 solid;
}

.business article{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}

.business .col1{
order: 1;
padding:15rem 14% 0 16%;
}

.business .col2{
order: 2;
position: relative;
border:0px #FF0000 solid;
}

/* 画像 */
.business .image img{
display: block;
width: 100%;
height: auto;
}

.business .col2 img{
border-radius: 3rem 0 0 3rem;
}
.business .col2 .image:last-child img{
border-radius: 3rem;
}

/* 1枚目 */
.business .col2 .image:first-child{
position: relative;
z-index: 1;
}

/* 2枚目 */
.business .col2 .image:last-child{
position: absolute;
left: -12%;
bottom: -50%;
width: 70%;
z-index: 2;
}

.business .text-scroll{
bottom:2rem;
}

/* ============ */
@media (max-width: 767px){
.business{
padding: 10rem 0 27rem;
}
.business article{
grid-template-columns: 1fr;
}
.business .col1{
padding:0 5%;
}
.business .col2 img{
border-radius: 2rem 0 0 2rem;
}
.business .col2 .image:last-child img{
border-radius: 2rem;
}
.business .col2 .image:first-child{
padding-left:5%;
}
.business .col2 .image:last-child{
left: 10%;
width: 60%;
}
.business .link-button{
text-align:right;
}
.business .text-scroll{
bottom:4rem;
}
}


/* =========================
タイトル・見出し・文字（共通）
========================= */
.sub-title img{
width: 1.5em;
height: auto;
display: block;
object-fit: contain;
margin-bottom:.5rem;
}

.sub-title{
display: inline-grid;
grid-auto-flow: column;
align-items: center;
gap: .6rem;
font-size: 1.8rem;
font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
letter-spacing: .08em;
font-weight: 700;
color: #FAABB1;
border:0px #FF0000 solid;
}

.article-title{
padding:0;
border:0px #FF0000 solid;
}
.article-title h2{
padding:1rem 0 0 0;
font-size: 3.3rem;
letter-spacing:.4rem;
font-family: "M PLUS Rounded 1c", sans-serif;
line-height:1.4;
font-weight: 500;
border:0px #FF0000 solid;
white-space:nowrap;
}

.text{
padding:3rem 0;
border:0px #FF0000 solid;
}

@media (max-width: 499px){
.article-title h2{
font-size: 2.8rem;
}
}


/* =========================
   large-image 
========================= */
.large-image{
position: relative;
border:0px #FF0000 solid;
padding:28rem 0 15rem 0;
z-index:1;
}

.large-image article{
height:65vh;
width:92%;
margin-left:auto; 
border:0px #FF0000 solid;
}

.large-image .image{
height:100%;
}

.large-image img{
width:100%;
height:100%;
object-fit:cover;
object-position: bottom;
display:block;
border-radius:3rem 0 0 3rem;
}


/* ============ */
@media (max-width: 767px){
.large-image{
padding:20rem 0 10rem 0;
}
.large-image article{
width:95%;
border-radius:2rem 0 0 2rem;
}
}


/* =========================
   recruit-and-contact
========================= */
.recruit-and-contact{
position: relative;
padding:3rem 0 10rem 0;
overflow: hidden;
border:0px #FF0000 solid;
}

.recruit-and-contact article{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
width:85%;
margin:0 auto;
border:0px #FF0000 solid;
}

.recruit-and-contact section{
position: relative;
z-index:1;
}

/* wrap */
.recruit-and-contact .wrap{
position: relative;
border: 2px solid #ddd; /* 色は後で上書き */
border-radius: 2rem;
padding: 5rem 4.9rem 7rem 4.9rem;
background: #FFF; 
text-align: center;
}

/* icon */
.recruit-and-contact .icon{
position: absolute;
top: -3rem;
left: -1.2rem;
width: 7.7rem;
height: 7.7rem;
border-radius: 999px;
display: grid;
place-items: center;
background: #ddd; /* 色は後で上書き */
}

.recruit-and-contact .icon img{
width: 70%;
width: 70%;
object-fit: contain;
display: block;
border:0px #FF0000 solid;
}

/* 色分け（RECRUIT） */
.recruit .wrap{
border-color: #88DFE7;
}
.recruit .icon{
background: #88DFE7;
}
.recruit .sub-title{
color: #88DFE7;
}
.recruit .link-button a{
background: #88DFE7;
border:2px #88DFE7 solid;
}
.recruit .link-button a::after{
color: #88DFE7 !important;
}

/* hover */
.recruit .link-button a:hover {
background: #FFF;
color: #88DFE7;
border:2px #88DFE7 solid;
}
.recruit .link-button a:hover::after{
background: #88DFE7;
color:#FFF !important;
}

/* 色分け（CONTACT） */
.contact .wrap{
border-color: #FFB96D;
height: 100%;
display: flex;
flex-direction: column;
}
.contact .icon{
background: #FFB96D;
}
.contact .sub-title{
color: #FFB96D;
}
.contact .text {
margin: auto;
}
.contact .link-button {
margin-top: auto;
}
.contact .link-button a{
background: #FFB96D;
border:2px #FFB96D solid;
}
.contact .link-button a::after{
color: #FFB96D !important;
}

/* hover */
.contact .link-button a:hover {
background: #FFF;
color: #FFB96D;
border:2px #FFB96D solid;
}
.contact .link-button a:hover::after{
background: #FFB96D;
color:#FFF !important;
}


/* ============ */
@media (max-width: 767px){
.recruit-and-contact{
padding:3rem 0 10rem 0;
}
.recruit-and-contact article{
grid-template-columns: 1fr;
width:90%;
gap: 3.5rem;
}
}


/* =========================
  NEWS
========================= */
.news{
position: relative;
padding: 12rem 0 0 0;
}

.news article{
display: grid;
grid-template-columns: 3fr 7fr;
gap: 2.5rem;
align-items: stretch;
width:85%;
margin:0 auto;
}


/* 左カラム */
.news article > section:first-of-type{
display: flex;
flex-direction: column;
padding-bottom:4rem;
}

.news .wrap{
align-self: flex-start;
}
.news .link-button{
margin-top: auto;
align-self: flex-start;
}


/* 右カラム */
.news article > section:last-of-type ul{
list-style: none;
margin: 0;
padding: 0;
}

/* 交互背景（last-of-type内のli） */
.news article > section:last-of-type li:nth-child(odd){
background: #FFF6E5;
}
.news article > section:last-of-type li:nth-child(even){
background: #FFFFFF;
}

/* liの共通箱 */
.news article > section:last-of-type li{
overflow: hidden;
}

/* a がある場合 */
.news article > section:last-of-type li > a{
  position: relative;   /* ← これを必ず入れる */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.2rem;
  padding: 1.2rem 4.2rem 1.2rem 1.4rem;
  color: inherit;
  text-decoration: none;
}


/* 日付＋本文は縦並び */
.news article > section:last-of-type li > a > span,
.news article > section:last-of-type li > a > p{
  grid-column: 1;
}

/* リンクなしの場合 */
.news article > section:last-of-type li:not(:has(a)){
  display: grid;
  grid-template-columns: 1fr;
  row-gap: .4rem;
  padding: 1.2rem 4.2rem 1.2rem 1.4rem;
}


/* 日付 span：色とフォント指定 */
.news article > section:last-of-type li span{
display:block;
  flex: 0 0 auto;
  color: #FDAAB2;
  font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
border:0px #FF0000 solid;
}

/* 本文 */
.news article > section:last-of-type li p{
margin: 0;
display:block;
}

/* 右端の丸囲み→（リンクがある時だけ出す） */
.news article > section:last-of-type li > a::after{
content: "\e5c8";
font-family: 'Material Icons';
font-weight: 700;
font-style: normal;
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
width: 2.4rem;
height: 2.4rem;
border-radius: 999px;
background: #FDA9B3;
display: grid;
place-items: center;
font-size: 1.3rem;
line-height: 1;
color:#FFF;
}


/* ============= */
@media (max-width: 767px){
.news{
padding: 7rem 0 0 0;
}

.news article{
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: start;
width:90%;
}

.news article > section:first-of-type{
display: flex;
flex-direction: row;
align-items: flex-end;
padding-bottom:0;
}
.news .wrap{
align-self: auto;
}
.news .link-button{
align-self: auto;
margin-top: 0;
margin-left: auto;
}
}

/* ============ */
@media (max-width: 499px){
.news .link-button a{
padding:0;
padding: 1.4rem 6.5rem 1.4rem 3.5rem;
}
}


/* =========================
　背景
========================= */
.bg-wrap{
border:0px #FF0000 solid;
position: relative;
}

.bg1{
position: absolute;
left: 0;
width: 100%;
height: 200vh;
z-index: 0;
overflow:hidden;
top: -30vw;
border:0px #FF0000 solid;
}

.bg1::before{
content:"";
display:block;
position: absolute;
width: 132vw;
aspect-ratio:1.81/1;
left: -45vw;
background: url("../image/bg1.png") no-repeat center / cover;
border:0px #FF0000 solid;
will-change: transform;
animation: bgPulse1 10s ease-in-out infinite;
}
@keyframes bgPulse1{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.8); }
}


.bg2{
position: absolute;
left: 0;
width: 100%;
height: 120vh;
z-index: 0;
overflow:hidden;
top: 15rem;
}

.bg2::before{
content:"";
display:block;
position: absolute;
width: 100vw;
aspect-ratio:1.81/1;
right: -15vw;
background: url("../image/bg2.png") no-repeat center / cover;
border:0px #FF0000 solid;
will-change: transform;
animation: bgPulse2 10s ease-in-out infinite;
}
@keyframes bgPulse2{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.8); }
}


.bg3{
position: absolute;
left: 0;
width: 100%;
height: 120vh;
z-index: 0;
overflow:hidden;
top: 50rem;
}

.bg3::before{
content:"";
display:block;
position: absolute;
width: 100vw;
aspect-ratio:1.85/1;
left: -20vw;
background: url("../image/bg3.png") no-repeat center / cover;
border:0px #FF0000 solid;
will-change: transform;
animation: bgPulse3 10s ease-in-out infinite;
}
@keyframes bgPulse3{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.8); }
}


/* ============ */
@media (max-width: 764px){
.bg1{
top: -50vw;
}
.bg1::before{
width: 250vw;
left: -160vw;
}

.bg2{
top: -3rem;
}
.bg2::before{
width: 200vw;
right: -110vw;
}

.bg3{
top: 5rem;
}
.bg3::before{
width: 200vw;
left: -110vw;
}

}


/* =========================
scrolling text（共通）
========================= */
.text-scroll{
position: absolute;
left: 0;
right: 0;
bottom: 0;
white-space: nowrap;
pointer-events: none;
user-select: none;

font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
font-weight: 200;
font-size: 13rem;
line-height: 1;
letter-spacing: .08em;
color:#FBF3E8;

z-index:0;
will-change: transform;
mix-blend-mode: multiply;
}


/* ---------------------
scrolling text（about）
--------------------- */
.about .text-scroll{
animation: aboutMarquee 18s linear infinite;
}
@keyframes aboutMarquee{
0% { transform: translateX(100%); }
100% { transform: translateX(-120%); }
}

/* ============ */
@media (max-width: 599px){
@keyframes aboutMarquee{
0% { transform: translateX(100%); }
100% { transform: translateX(-220%); }
}
}


/* ---------------------
scrolling text（business）
--------------------- */
.business .text-scroll{
animation: businessMarquee 18s linear infinite;
}
@keyframes businessMarquee{
0% { transform: translateX(-60%); }
100% { transform: translateX(100%); }
}

/* ============ */
@media (max-width: 599px){
@keyframes businessMarquee{
0% { transform: translateX(-220%); }
100% { transform: translateX(100%); }
}
}


/* ---------------------
scrolling text（recruit-and-contact）
--------------------- */
.recruit-and-contact .text-scroll{
animation: otherMarquee 18s linear infinite;
}
@keyframes otherMarquee{
0% { transform: translateX(100%); }
100% { transform: translateX(-120%); }
}

/* ============ */
@media (max-width: 599px){
@keyframes otherMarquee{
0% { transform: translateX(100%); }
100% { transform: translateX(-420%); }
}
}


/* =========================
   scroll-hint
========================= */
/* 共通カラー */
:root{
  --hint-color: #E9CC96;
}

.scroll-hint{
position: fixed;
left: 2rem;
bottom: 2rem;
z-index: 50;

display: grid;
grid-auto-flow: row;
justify-items: center;
gap: 3rem;
text-decoration: none;
}

/* label：90度回転して、ラインの上に */
.scroll-hint__label{
font-size: 1rem;
letter-spacing: .18em;
font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
font-weight: 700;
text-transform: uppercase;
color: var(--hint-color);
display: inline-block;
transform: rotate(-90deg);
transform-origin: center;
white-space: nowrap;
}

/* ライン */
.scroll-hint__line{
position: relative;
width: 1px;
height: 80px;
background: color-mix(in srgb, var(--hint-color) 60%, transparent);
}

/* 丸チョボ */
.scroll-hint__line::after{
content:"";
position:absolute;
left: 50%;
top: -1rem;
width: .5rem;
height: .5rem;
border-radius: 50%;
background: var(--hint-color);
transform: translateX(-50%);
animation: hintDot 1.4s ease-in-out infinite;
}

@keyframes hintDot{
0%   { transform: translate(-50%, 0); opacity: 0; }
15%  { opacity: 1; }
70%  { opacity: 1; }
100% { transform: translate(-50%, 80px); opacity: 0; }
}

/* ============ */
@media (max-width: 764px){
.scroll-hint{
left: auto;
right: 2rem;
}
}

@media (max-width: 599px){
.scroll-hint{
display:none;
}
}