/**
* uaplus.css version 0.0.1
*/
*,*::after,*::before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media (forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s)::before,:where(del,ins,s)::after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s)::before{content:"stricken text start "}:where(s)::after{content:" stricken text end"}:where(del)::before{content:"deletion start "}:where(del)::after{content:" deletion end"}:where(ins)::before{content:"insertion start "}:where(ins)::after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type="search"]){-webkit-appearance:textfield}@supports (-webkit-touch-callout:none){:where([type="search"]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:oklch(0% 0 0 / .3)}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity 300ms ease-out,display 300ms allow-discrete,overlay 300ms allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden="until-found"]){display:none!important}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}

img {
width: 100%;
max-width: 100%;
height: auto;
line-height: 1 !important;
}

body {
color: #000;
line-height: 1.6;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
overflow-x: hidden;
container-type: inline-size;
}

header#site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 20px 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: #fff;
height: 180px;
transition: height 0.3s ease, transform 0.5s ease;
font-family: "BIZ UDPGothic","Noto Sans JP", sans-serif;
letter-spacing: 0.1em;
}


header#site-header.is-fixed.is-compact  {
padding: 0 20px 0;
}

#home header#site-header {
background: transparent;
color: #fff;
}

header#site-header.shrink {
height: 80px;
}

header#site-header.hidden {
transform: translateY(-100%);
}


header#site-header nav {
display: flex;
margin-top: 40px;
}
header#site-header.is-fixed.is-compact nav {
margin-top: 0 !important;
}
@media (min-width: 769px) and (max-width: 960px) {
header#site-header nav {
display: flex;
margin-top: 25px;
gap:0.7rem;

}
header#site-header.is-fixed.is-compact nav  {
margin-top: 0;
}
}
@media (max-width: 768px) {
:where(h1){
font-size: 1.2em;
}
header#site-header nav {
display: flex;
margin-top: -60px;
z-index: -1;
}
header#site-header {
position: fixed;
top: 0;
left: 0;
}
}

header#site-header.shrink nav {
margin-top: -20px;
}

header#site-header nav a {
color: inherit;
margin: 0 1.3rem;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
transition: width 0.3s ease;
}

header#site-header nav a:hover{
opacity: 0.5;
transition: all 0.3s ease 0s;
}

.common_head_line {
background-image: url(../images/common_head_line.svg);
width: 100%;
height: 44px;
background-position: right;
background-repeat: no-repeat;
background-size:cover;
}

.form-row__txt{
width: 70%;
}

@media (min-width: 1091px) and (max-width: 1400px) {
header#site-header {
height: 160px;
}

header#site-header nav a {
font-size: 0.8rem;
margin: 0 0.6rem;
}
}

@media (min-width: 961px) and (max-width: 1090px) {
header#site-header nav a {
font-size: 0.75rem;
margin: 0 0.2rem;
}
}

@media (min-width: 769px) and (max-width: 960px) {
header#site-header {
height: 100px;
}

header#site-header nav a {
font-size: 0.7rem;
margin: 0;
}
}
@media (max-width: 768px) {
.common_head_line {
background-size: cover;
height: 28px;
}
.header_common_head_line {
background-image: url(../images/common_head_line.svg);
width: 100%;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top:100px;
height: 28px;
}

.header_common_head_line_recruit{
top: unset;
}
}



header#site-header nav a.icon-link {
white-space: nowrap;
}

header#site-header nav a.icon-link::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
background-image: url('../images/link_icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}

header#site-header .logo img {
width: 100%;
transition: width 0.3s ease;
}

header#site-header.shrink .logo img {
width: 150px;
margin-top: -10px;
}

@media (min-width: 961px) and (max-width: 1200px) {
header#site-header .logo img {
width: 240px;
}
}

@media (min-width: 769px) and (max-width: 960px) {
header#site-header .logo img {
width: 200px;
}
}


@media (max-width: 768px) {
header .logo img {
width: 100%;
max-width: 160px;
margin-top: -5px;
margin-left: -10px;
}

header#site-header {
height: 100px;
}
}

header .logo_capcom {
position: absolute;
top: 50px;
right: 30px;
transition: width 0.3s ease;
}

header#site-header.shrink .logo_capcom {
position: absolute;
top: 36px;
left: 190px;
right: auto;
width: 70px;
}

header#site-header.is-fixed.is-compact .logo_capcom {
display: none;
}

.border_bottom{
border-bottom: #000000 1px solid;
transition: width 0.3s ease;
}

.border_bottom:hover{
opacity: 0.5;
}


@media (min-width: 769px) and (max-width: 960px) {
header .logo_capcom {
position: absolute;
top: 25px;
right: 30px;
width: 80px;
}
}

@media (max-width: 768px) {
header .logo_capcom {
position: absolute;
top: 47px;
right: 70px;
width: 70px;
}
}

.nav-toggle {
display: none;
font-size: 2em;
background: none;
border: none;
color: inherit;
cursor: pointer;
}

@media (max-width: 768px) {
.nav-toggle {
display: block;
}

header nav {
flex-direction: column;z-index: 1;
background: #000;
position: fixed;
top: 60px;
left: 0;
width: 100%;
height: 100vh;
padding: 110px 20px 90px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
background-image: url(../images/sp_gnav_bg.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0 100px;
margin-top: 0;    /* ← 上マージンを削除 */
}

header nav.active {
opacity: 1;
pointer-events: auto;
}

header nav a {
color: #fff;
display:block;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
padding: 1.7em 1rem 1rem;
background: url('../images/sp_gnav_line.png') no-repeat;
background-size: 100%;
background-position: top center;
}

header nav a:first-child {
background: url('../images/sp_gnav_line_top.png') no-repeat;
background-size: 100%;
background-position: top center;
margin-top: 80px !important;
padding: 1.7em 1rem 1rem;
}
header nav a:last-child {
background:
url('../images/sp_gnav_line_btm.png') no-repeat bottom center / 100% auto,
url('../images/sp_gnav_line.png') no-repeat top center / 100% auto;
padding: 1.7em 1rem;
}
header nav.active a {
opacity: 1;
transform: translateY(0);
}


header nav.active a:nth-child(1) {
transition-delay: 0.1s;
}

header nav.active a:nth-child(2) {
transition-delay: 0.2s;
}

header nav.active a:nth-child(3) {
transition-delay: 0.3s;
}

header nav.active a:nth-child(4) {
transition-delay: 0.4s;
}

header nav.active a:nth-child(5) {
transition-delay: 0.5s;
}

.form-row__txt{
width: 100%;
}
}

main {
padding-top: 150px;
width: 100cqw;
}

@media (max-width: 768px) {
main {
padding-top: 70px;
}
}

@media (min-width: 961px) and (max-width: 1200px) {
main {
padding-top: 130px;
}
}

@media (min-width: 769px) and (max-width: 960px) {
main {
padding-top: 70px;
}
}



body#home main {
padding: 0;
}

.container {
width: 89.4%;
margin: 0 auto;
padding-top: 100px;

}

.container_p0 {
width: 90%;
margin: 0 auto;
padding-bottom: 16px;

}
.sub_container {
width: 89.4%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 120px;
}

.sub_container-pd{
padding-bottom: 30vh!important;
}

@media (max-width: 768px) {
.sub_container {
padding-top: 50px;
}
}

.sub_container .sub_container_wrap {
max-width: 830px;
margin: 0 auto;
padding: 10px;
}
.sub_container .sub_container_wrap_m {
max-width: 950px;
margin: 0 auto;
padding: 10px;
}
.sub_container .sub_container_wrap_l {
max-width: 1020px;
margin: 0 auto;
padding: 10px;
}
.sub_container .sub_container_wrap_archive {
max-width: 1060px;
margin: 0 auto;
padding: 10px;
}
.page-top {
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px 15px;
background: #000;
color: #fff;
border: none;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 999;
}

.page-top.visible {
opacity: 1;
}

/* top */
.hero {
position: relative;
text-align: center;
}

.hero-bg img {
width: 100%;
height: auto;
}

.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}

.works-thumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.works-thumbs img {
width: calc(25% - 10px);
}

/* PC：横並び＆中央寄せ。gapは縮む */
.news-access {
display: flex;
flex-direction: row;
flex-wrap: nowrap;                       /* 折り返し禁止 */
justify-content: center;                 /* 2つを中央に寄せる */
gap: clamp(1.2em, 4vw, 4.5em);           /* 画面が狭いほどgapを小さく */
max-width: 76%;
margin: 12em auto;
}

/* 子要素は「基準幅」を持つが、必要に応じて縮む。100%は埋めない */
.news-access > * {
flex: 1 1 520px;                         /* 基準520px、縮んでもOK、広がってもOK */
max-width: 560px;                        /* 広がりすぎ防止（お好みで調整） */
min-width: 0;                            /* はみ出し防止 */
}


@media (max-width: 768px) {
.news-access {
width: 94%;
max-width: none;
margin: 6em auto;
flex-direction: column;
flex-wrap: nowrap;
gap: 2em;
}
.news-access > * {
flex: 0 1 auto;
width: 100%;
max-width: none;
}
}


.news,.access {
flex: 1;
min-width: 300px;
border: 2px solid #fff;background: #000;color: #fff;padding: 2em;
}

.contact-preview {
text-align: center;
margin-top: 30px;
}

footer {
background: #000;
color: #fff;
text-align: center;
padding: 20px;
z-index: 1;
position: relative;
}

.footer-links a {
color: #fff;
text-decoration: none;
margin: 0 5px;
}


.pc_only {
display: block;
}

.sp_only {
display: none;
}
.ssp_only {
display: none;
}

@media (max-width: 768px) {
.pc_only {
display: none;
}

.about-text.pc_only {
display: none!important;
}

.sp_only {
display: block;
}

.about-text.sp_only {
display: block!important;
margin-top: 30px;
}
.ssp_only {
display: none;
}
}
@media (max-width: 428px) {
.pc_only {
display: none;
}

.sp_only {
display: block;
}
.ssp_only {
display: block;
}
}


.nav-toggle {
margin-top: -15px;
width: 30px;
height: 25px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
background: none;
border: none;
cursor: pointer;
z-index: 1100;
}

.nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all 0.3s ease;
border-radius: 2px;
}


.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(10px, 10px);
}

.nav-toggle.active span:nth-child(2) {
opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}


.nav-toggle {
display: none;
}


@media (max-width: 768px) {
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

.common_background {
background-image: url(../images/common_background.png);
background-size: 100% auto;
width: 100%;
background-repeat: repeat-y;
background-position: top;
margin-top: 40px;
padding-bottom: 20vh;
}
@media (max-width: 768px) {
.common_background {
margin-top: 20px;
}
}

html {
font-size: 16px;
}

@media (max-width: 428px) {
html {
font-size: clamp(13px, calc(100vw * 15 / 468), 15px);
}
}


/* top section */
.greenline {background: #57B0BC;height:0.8em;margin-top: 6em;width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);}


/* top section - about */
.about {width: 100%;max-width: 1440px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.about-bg {position: relative;width: 24%;order: 1;z-index: 100;}
.about-text{position: relative;color: #fff;width: 76%;order: 2;z-index: 0;padding:5% 2% 2% 6%;}
.about-text h1.about_h1 {font-size: 5.9vw;line-height: 1;}
.about-text p.about_p1 {font-size: 14px;padding-top: 1.5em;}
.about-text p.about_p2 {font-size: 16px;padding-top: 1.5em;line-height: 1.9;}
.chara-image {display: block;width: 110%;margin-left: -5%;margin-right: -5%;max-width: none;}

.about-text::before{
position: absolute;
content: '';
top: 0;
width: 1px;
height: calc(100% + 3.5vw);
background-color: #fff;
}
.about-text::before{
left: 5%;
}  
.about-text::after{
position: absolute;
content: '';
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
left: 0;
}

@media (min-width: 1024px) {
.about-text h1.about_h1 {font-size: 80px !important;font-family: "Noto Sans JP";}
.about-text p.about_p1 {font-size: 12px;}
.about-text p.about_p2 {font-size: 16px;}
}

@media (min-width: 1240px) {
.about-text p.about_p2 {font-size: 18px;}
}

@media (max-width: 768px) {
.about {flex-direction: column;}
.about-bg {order: 2;width: 50%;margin-right: 0;margin-left: auto;margin-top: -20px;}
.about-text{order: 1;width: 100%;padding:5% 2% 2% 4%;}
.about-text h1.about_h1 {font-size: 9.6vw;}
.about-text p.about_p1 {font-size: 11px;}
.about-text p.about_p2 {font-size: 16px;padding-top: 1em;padding-bottom: 0.5em;}
.about-text::before{height: calc(100% + 8vw);}
.about-text::before{left: 1vw;}
.about-text::after{width: 58%;left: -5vw;}
}
@media (max-width: 428px) {
.about-text p.about_p1 {font-size: 10px;}
.about-text p.about_p2 {font-size: 14px;}
}

/* top section - works */
.works-preview {
width: calc(100vw - 2%);
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
}
.works-preview .button-wrap.button_bl {
width: 80%;
} 

.frame-wrapper {
position: relative;
width: 100%;
display: block;
margin: 2em auto;
}
@media (min-width: 769px) {
.frame-wrapper {
min-height: 28em;
}
}
@media (max-width: 768px) {
.frame-wrapper {
min-height: 28em;
}
}
@media (max-width: 428px) {
.frame-wrapper {
min-height: 30em;
}
}
.frame-inner {
position: absolute;
top: 0; left: 94px; right: 94px; bottom: 0;
background: #fff url('../images/corner-bottom-img.svg') no-repeat;
background-position: right 35px bottom 13px;
padding: 1em;
z-index: 1;margin-left: -1px;margin-right: -1px;
box-sizing: border-box;
}
.frame-inner2 {
position: absolute;
top: 72px; left: -44px; right: 94px; bottom: 72px;
background: #fff;
padding: 1em;
z-index: 2;width: calc(100% + 87px);
box-sizing: border-box;text-align: center;
}
.frame-inner3 {
text-align: center;margin-top: -2em;
}

.corner {
position: absolute;
width: 94px; height: 74px;
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
}

.top-left     { top: 0; left: 0; background-image: url('../images/corner-top-left.svg');z-index: -1; }
.top-right    { top: 0; right: 0; background-image: url('../images/corner-top-right.svg');z-index: -1; }
.bottom-left  { bottom: 0; left: 0; background-image: url('../images/corner-bottom-left.svg');z-index: -1; }
.bottom-right { bottom: 0; right: 0; background-image: url('../images/corner-bottom-right.svg');z-index: -1; }


@media (max-width: 768px) {
.frame-inner {
position: absolute;
top: 1px; left: 55px; right: 55px; bottom: 1px;
padding:2em 1em;
}
.frame-inner2 {
position: absolute;
top: 49px; left: -29px; right: 55px; bottom: 49px;
z-index: 2;width: calc(100% + 58px);
}
.frame-inner3 {
text-align: center;margin-top: -2em;
}

.corner {
position: absolute;
width: 55px; height: 50px;
}

.top-left     { top: 0; left: 0; background-image: url('../images/sp-corner-top-left.svg');z-index: -1; }
.top-right    { top: 0; right: 0; background-image: url('../images/sp-corner-top-right.svg');z-index: -1; }
.bottom-left  { bottom: 0; left: 0; background-image: url('../images/sp-corner-bottom-left.svg');z-index: -1; }
.bottom-right { bottom: 0; right: 0; background-image: url('../images/sp-corner-bottom-right.svg');z-index: -1; }
}
@media (max-width: 428px) {
.frame-inner3 {
margin-top: -2.5em;
}
}


.chevron {
transition: transform 0.3s ease;
position: absolute;
right: 10px;
top: 50%;
width: 10px;
height: 10px;
}

.chevron::before,
.chevron::after {
content: "";
position: absolute;
width: 7px;
height: 1px;
background-color: #fff;
left: 0;
transition: transform 0.3s ease;
}

.chevron::before {
transform: rotate(45deg);
top: 1px
}

.chevron::after {
transform: rotate(-45deg);
top: 6px
}


/* top section - works - thumnail list */
.thumbnail-wrapper {
overflow: hidden;
height: 290px !important;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}

.thumbnail-track {
display: flex;
align-items: center;
gap: 0;
height: 290px !important;
animation: none;
}

.thumbnail-track img {
height: 290px !important;
width: auto;
flex-shrink: 0;
object-fit: contain;
}

@media (max-width: 768px) {
.thumbnail-wrapper,.thumbnail-track,.thumbnail-track img {
height: 170px !important;
}
}



@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(var(--scroll-distance));
}
}



/* top_hero anime */
.hero {
position: relative;
width: 100%;
height: 100vh;   /* 旧環境の保険 */
height: 100svh;  /* iOSの“最小”可視領域に合わせてまずズレ防止 */
overflow: hidden;
background: #000;
}

@supports (height: 100dvh) {
.hero { height: 100dvh; }  /* 新しめの環境では常に実サイズに追従 */
}

#video-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#video-area video {
width: 100%;
height: 100%;
object-fit: cover;
}

/* 走査線 */
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/hero_ami_new.png) repeat;
opacity: 0.9;
z-index: 2;
}

.hero-text {
position: relative;
z-index: 3;
}

.hero-copyright {
position: absolute;
bottom: 10px;
right: 20px;
z-index: 3;
color: #fff;
font-size: 0.75rem;
opacity: 0.8;
text-align: right;
}

.l-animation {
padding-top: 150px;
max-width: 640px;
margin: 0 auto;
width: min(100vw, 640px);
}

@media (max-width: 768px) {
.l-animation {
padding-top: 30px;
max-width: 100%;
}
}
@media (max-height: 800px) {
.l-animation {
height: min(100vh, calc(100dvh - 10vh));
width: auto;
}
}

.l-animation > svg {
width: 100%;
height: 100%;
display: block;
}



/* common */
.w100 {width: 100%;}
.w100vw {width: 100vw;  margin: 0 calc(50% - 50vw);}
.top_section_top {line-height: 0;width: 43.5vw;}
.blackbg {background: #000;}
.responsive-wrapper {width: 100%;height: auto;overflow: hidden;}
.responsive-wrapper svg{
float: left;
}
.flex-flex-end {display: flex;justify-content: flex-end;}
.flex-center {display: flex;justify-content:center;}
.text-stroke-bl {-webkit-text-stroke: 1px #000; text-stroke: 1px #000;}
.text-stroke-wh {-webkit-text-stroke: 1px #fff; text-stroke: 1px #fff;}

.button-wrap {display: flex;align-items: center;max-width:267px;height: auto;aspect-ratio: 267 / 62;}
.contact-preview .button-wrap {width:267px;/*height:62px;*/}
.button-wrap a.btn_link {position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;height: 100%;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: .5s;}

.button-wrap.button_wh {background:url(../images/button-wh.svg) no-repeat;background-size: contain;transition: .2s;}
.button-wrap.button_bl {background:url(../images/button-bl.svg) no-repeat;background-size: contain;transition: .2s;}
.button-wrap.button_wh a.btn_link {color: #000;}
.button-wrap.button_bl a.btn_link {color: #ffffff;}

.button-wrap:hover{
transform: scale(1.05);
}

.chevron2 {
transition: transform 0.3s ease;
position: absolute;
right: 10px;
top: 47%;
width: 10px;
height: 10px;
}

.chevron2::before,
.chevron2::after {
content: "";
position: absolute;
width: 7px;
height: 1px;
left: 0;
transition: transform 0.3s ease;
}

.chevron2::before {
transform: rotate(45deg);
top: 1px
}

.chevron2::after {
transform: rotate(-45deg);
top: 6px
}

.button-wrap.button_wh .chevron2::before,
.button-wrap.button_wh .chevron2::after {
background-color: #000;
}
.button-wrap.button_bl .chevron2::before,
.button-wrap.button_bl .chevron2::after {
background-color: #ffffff;
}


footer .footer-wrap {max-width: 89%;margin:0 auto;display: flex;justify-content: space-between;}
footer ul li {list-style-type: none;} 
footer ul li a {font-size: 1.2vw;} 
footer ul li:first-child a {border-right: 1px solid #fff;margin-right:1em;padding-right:1em;} 
footer .footer_logo {max-width: 300px;}
footer .footer_link {padding-top: 1.5em;display: flex;justify-content: space-between;}
footer .footer_link a {font-size: 14px !important;/*margin-top: 2em;*/color: #D7D7D7;display: block;}
footer .footer_link a:hover{
opacity: 0.5;
transition: all 0.3s ease 0s;
}
footer p.copy {font-size: 10px !important;text-align: right;margin-top: 3em;color: #D7D7D7;}

@media (max-width: 768px) {
footer .footer-wrap {display: block;}
footer .footer_logo {max-width: 140px;margin: auto;}
footer .footer_link {display: flex;justify-content: center;}
footer .footer_link a {font-size: 12px !important;white-space: nowrap;}
footer p.copy {text-align: center;}
footer p.copy {font-size: 9px !important;}
}


a {text-decoration: none;color: inherit;}
/*a:hover {opacity: 0.8;}*/

.fs12 {font-size: 1.2vw;}
.fs13 {font-size: 16px;}
.fs14 {font-size: 1.4vw;}

@media (min-width: 1024px) {
.fs12 {font-size: 14px;}
.fs13 {font-size: 18px;}
.fs14 {font-size: 18px;}
}

/* @media (max-width: 768px) {
.fs12 {font-size: 2.2px;}
.fs13 {font-size: 2.6vw;}
.fs14 {font-size: 3.4vw;}
} */
@media (max-width: 768px) {
.fs12 {font-size: 2.2px;}
.fs13 {font-size: 14px;}
.fs14 {font-size: 3.4vw;}
}
@media (max-width: 428px) {
.fs13 {font-size: 13px;}
}

.c_wh {color: #fff;}
.pb0 {margin-top: -80px;padding-bottom: 0;}
.mt0 {margin-top: 0 !important;}
.mt100 {margin-top: 100px;}
.mt1em {margin-top: 1em;}
.mb1em {margin-bottom: 1em;}
.mb1-5em {margin-bottom: 1.5em;}
.mb2em {margin-bottom: 2em !important;}
.mb3em {margin-bottom: 3em;}
.lh1 {line-height: 1;}
.flex_space-between {display: flex;justify-content: space-between;}
.flex_space-between_left {width: 50%; height: auto;}
.flex_space-between_right {width: 50%;}
.flex_space-between_left img{
height: 100%;
}

h2.top_h2ttl {display: inline-block;margin: auto;padding-bottom: 0.5em;}
h2.top_h2ttl span,h3.top_h3ttl {display: block;font-size: 2.9vw;font-weight: 900;}
.tx-align-right {text-align: right;}
.top_preview_btm {position: absolute;bottom:7%;}
@media (max-width: 768px) {
.top_preview_btm {width: 90%;}
}

/* top section - service */
.service-preview {margin-bottom: 2%;}
.service-preview .flex_space-between_left {padding: 2% 0 2% 2.8%;background: #000;padding: 7% 0;}
.service-preview .flex_space-between_right {padding: 12% 6% 1% 8%;position: relative;}
.service-preview .button-wrap {margin:0 0 0 auto;}

.recruit-preview-box {background: #57B0BC;display: block;height: 100%;width: 89.5%;padding: 5% 4.5% 1% 9%;position: relative;}

/* top section - company */
.company-preview {margin-bottom: 2%;}
.company-preview .flex_space-between_right {padding: 1% 10% 1% 2.5%;position: relative;}
.company-preview .flex_space-between_right h2.top_h2ttl {
-webkit-text-stroke: 2px #fff;
text-stroke: 2px #fff;
paint-order: stroke;
font-weight: 900;}
.service-preview .flex_space-between_right h2.top_h2ttl {
-webkit-text-stroke: 2px #000;
text-stroke: 2px #000;
paint-order: stroke;
font-weight: 900;}
.bg_bl {background: #000000;}


@media (max-width: 1240px) {
.top_preview_btm p {margin-right: 11%;}
}

@media (max-width: 1024px) {
h2.top_h2ttl img {height: 1.8em;width: auto;} 
}

@media (min-width: 769px) {
.company-preview .flex_space-between_left,
.service-preview .flex_space-between_right,
.recruit-preview .flex_space-between_left {order: 1 !important;}
.company-preview .flex_space-between_right,
.service-preview .flex_space-between_left,
.recruit-preview .flex_space-between_right {order: 2 !important;}
.top_cnt_wrap .flex_space-between {display: flex;justify-content: space-between;align-items: stretch;}
}

@media (max-width: 768px) { 
.flex_space-between {display: block;}
.flex_space-between_left {width: 100%;}
.flex_space-between_right {width: 100%;}
/* h3.top_h3ttl {font-size: 5.8vw;} */
h3.top_h3ttl {font-size: 18px;}
h2.top_h2ttl span {font-size: 26px;}
h2.top_h2ttl img {height: 2em;width: auto;}
.company-preview h2.top_h2ttl img,.service-preview h2.top_h2ttl img{height:2.4em;width:auto}
.company-preview h2.top_h2ttl img{margin-left:-2px}
.service-preview h2.top_h2ttl img{margin-right:-2px}
}

@media screen and (max-width: 768px) {
.company-preview .flex_space-between_right {min-height: 23em;padding: 50px 10% 1% 10%;position: relative;z-index: 5;}
.top_cnt_wrap .button-wrap.button_wh {width: 90%;}
.company-preview .flex_space-between_left {position: relative;z-index: 4;margin-top: -55px;padding-left:25%}
.service-preview .flex_space-between_right {padding: 50px 10% 1% 10%;position: relative;z-index: 5;}
.service-preview .flex_space-between_left {position: relative;z-index: 4;margin-top: -55px;padding-right:26%}
.recruit-preview-box {border:2px solid #000;margin-left:-2.5%;padding: 5% 4.5% 20px 9%;}
.recruit-preview .flex_space-between_left {padding-left:20%}
.flex_space-between_right p {font-size:14px !important}
.company-preview .flex_space-between_right p.mb1em {margin-bottom: 3em;}
.recruit-preview .flex_space-between_left img { object-fit: cover;}
}



@media (max-width: 428px) {
.company-preview .flex_space-between_right {min-height: 28em;}
h2.top_h2ttl img {height: 1.6em;width: auto;}
.company-preview h2.top_h2ttl img,.service-preview h2.top_h2ttl img{height:1.9em;width:auto}
.company-preview h2.top_h2ttl img{margin-left:-1px}
.service-preview h2.top_h2ttl img{margin-right:-1px}
}

@media (max-width: 400px) {
.top_preview_btm {bottom: unset;}
.company-preview .flex_space-between_left {
margin-top: -100px;
}
}



/* top section - contact */
.contact-preview {position: relative;margin-top: -20vh;margin-bottom: -1vh;}
.page__contact .contact-preview,.single-post .contact-preview{margin-top: 0;margin-bottom: 0;}
.contact-wrap {position: absolute;width: 100%;z-index: 10;}
.contact-wrap-inr {width: 90%;max-width: 1440px;margin:0 auto;padding-top: 20%;position: relative;}
.contact-wrap-inr-top {display: flex;justify-content:space-between;width: 100%;align-items: flex-end;}
.contact-preview h2.top_h2ttl {margin-left: 0 !important;margin-right: auto !important;text-align: left !important;}
.contact-preview .contact_tx {margin-bottom: 1em;font-size: 1.3vw;background: #2b2b2b20;color: #fff;text-align: right;}
.contact-preview .top_h3ttl {border-top: 1px solid #fff;width: 100%;color: #fff;text-align: left;}
.contact-preview .btn_wh {text-align: right;margin-top: 1em;}

@media (min-width: 1025px) {
.contact-preview .contact_tx {font-size: 14px;}
}

@media (max-width: 1024px) {
.contact-wrap-inr {padding-top: 15%;}
}
@media (max-width: 768px) { 
.contact-preview h2.top_h2ttl{padding-bottom: 0;}
.contact-preview h2.top_h2ttl img{width: auto;display: inline-block;/*max-width: 142px;*/}
.contact-preview .top_h3ttl {border-top:none;border-bottom: 1px solid #fff;position: absolute;top:214px}
.flex-flex-end {justify-content: flex-start;position: absolute;top:26em}
.contact-wrap-inr-top {flex-direction: column;text-align: left;position: absolute;top:160px}
.contact-preview .contact_tx {position: absolute;top:100px;left:0;text-align: left;font-size: 14px;line-height: 1.4em;}
}
@media (max-width: 700px) {
.contact-preview h2.top_h2ttl img{height: 1.8em;}
.flex-flex-end {top:22em;}
.contact-preview.recruit-preview .flex-flex-end {top:26em;}
}
@media (max-width: 600px) {
.contact-preview .top_h3ttl {top:150px} 
.flex-flex-end {top:18em;}
.contact-preview.recruit-preview .flex-flex-end {top:22em;}
.contact-wrap-inr-top {top:100px}
}
@media (max-width: 500px) {
.flex-flex-end {top:16em;}
.contact-preview.recruit-preview .flex-flex-end {top:20em;}
}
@media (max-width: 428px) {
.contact-preview h2.top_h2ttl img{height: 28px;}
.contact-preview .top_h3ttl {position: absolute;top:80px}
.flex-flex-end {position: absolute;top:15em;}
.contact-preview.recruit-preview .flex-flex-end {top:15em;}
.contact-wrap-inr-top {position: absolute;top:52px}
.contact-preview .contact_tx {position: absolute;top:80px;font-size: 14px;}
}

/* top news */
.news_list,.access_tx {margin-top: 1.5em;}

@media (max-width: 768px) {
.news_list,.access_tx {margin-top: .5em;}
.news-access h2.top_h2ttl span {padding-bottom: .175em;}
}

ul.news_list li,.access_tx {font-size:16px;}
ul.news_list li {list-style: none;}
ul.news_list li p {padding:0.5em 0 1.5em;}
ul.news_list li span {font-size: 13.5px;padding: 0.4em 0.8em 0.45em;line-height: 1;margin-left: 0.8em; display: inline-block;background: #fff;border-radius: 20px;font-weight: bold;}
ul.news_list li span.cat-uncategorized {color: #57B0BC;}
ul.news_list li span.cat1 {color: #C32331;}
ul.news_list li span.cat2 {color: #B99A0E;}
ul.news_list li span.cat3 {color: #02429A;}


.news_list a:hover{
opacity: 0.5;
transition: all 0.3s ease 0s;
}


/* news */
.category-top-message{
max-width: 1000px;
width: 100%;
margin: 0 auto 30px auto;
text-align: center;
}
.news-page__date{
display: flex;
font-weight: 400;
gap: 10px;



align-items: center;
margin-bottom: 5px;
}
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {
display: block;
font-size: .8125em;
margin-left: 10px;
}
.wp-block-latest-posts__post-excerpt p{text-decoration: underline;color: #000;}


.ttl{
font-size: 16px;
line-height: 1.7rem;
color: #000;
font-weight: 500;
}
.wp-block-latest-posts__post-excerpt, .wp-block-latest-posts__post-full-content {
margin-bottom: 0;
margin-top: 0;
}
.page-wrapper{
max-width: 1080px;
width: 100%;
margin: 50px auto 0 auto;
}
.date_cat{display: flex;align-items: center;}
.news-title{
font-size: 25px;
margin: 10px 0;
}
.wp-block-image img {
max-width: 530px;
width: 100%;
height: 100%;
margin:20px auto;;
display: block;
}
.single-btn{
max-width: 1000px;
margin: 30px auto 100px auto;
width: fit-content;
display: flex;
}
.single-btn a{margin-right: 20px;}
.single-btn a:last-child{margin-right: 0px;}


h1.h1ttl {text-align: left;}
h1.h1ttl img {max-height: 100px;height: 3em;width: auto;}
#about h1.h1ttl img {
width: 35vw;
max-width: 466px;
height: auto;
max-height: inherit;
}
@media (max-width: 768px) {
h1.h1ttl img.origScale {max-width: 300px !important;}
}
@media (max-width: 500px) {
h1.h1ttl img.origScale {max-width: 240px !important;}

}


/* .fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}

.fade-in.show {
opacity: 1;
transform: translateY(0);
}

.bounce-in {
opacity: 0;
}

.bounce-in.show {
animation: bounceUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes bounceUp {
0% {
transform: translateY(100px) scale(0.8);
opacity: 0;
}
60% {
transform: translateY(-12px) scale(1.1);
opacity: 1;
}
80% {
transform: translateY(4px) scale(0.98);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
} */

/* 速く“ボンッ”と出す版 */
/* .pyoko-bon {
opacity: 0;
transform-origin: bottom center;
will-change: transform, opacity;
}

.pyoko-bon.show {
animation: bonPop .32s cubic-bezier(.18,1,.24,1) forwards;
opacity: 1;
} */

.pyoko-bon{
transform-origin: bottom center;
will-change: transform, opacity;
display: block;
height: auto;
}

/* @keyframes bonPop {
0%   { transform: translateY(30px) scale(.90); opacity: 0; }
50%  { transform: translateY(-4px) scale(1.10); opacity: 1; }
85%  { transform: translateY(2px)  scale(.99); } 
100% { transform: translateY(0)    scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
.pyoko-bon.show { animation: none; opacity: 1; }
} */


/* パンくず */
.bcn {font-size: 13px;}
.breadcrumb {width: 86%;margin: 35px auto 0;font-size: 13px;font-weight: 700;}
@media (max-width: 768px) {
.breadcrumb {width: 86%;margin: 20px auto 0;}
}

/* about & privacy-policy */
#about h1.h1ttl {margin-bottom: 2em;}
#about .h1ttlja {white-space: nowrap;}
@media (min-width: 768px) {
#about h1.h1ttl {display: flex;align-items: flex-end}
}

#about h2.wp-block-heading,#policy h2.wp-block-heading {margin-top: 2em;margin-bottom: 0.5em;}
#about h3.wp-block-heading,#policy h3.wp-block-heading {margin-top: 1em;margin-bottom: 0.5em;}
#policy h1.h1ttl {margin-bottom: 0.3em;}
#policy h1.h1ttl img {width: auto; max-height: 228px;height: 6em;}


#policy .wp-block-list {padding-left: 30px;padding-top: 1em;}
#policy .wp-block-list li {list-style: disc;}

.inline-block {display: inline-block;}

.h1ttlja {-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff;
paint-order: stroke;
font-weight: 900;font-size:38px;line-height: 1.1;}
.h1ttlja-w {
text-stroke: 1px #000;
paint-order: stroke;
font-weight: 900;font-size:38px;line-height: 1.1;color: #fff;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;}
h2.h1ttlja {margin-bottom: .4em;}

@media (max-width: 768px) {
.h1ttlja,.h1ttlja-w {font-size:22px;}
.top_cnt_wrap {margin-top: 0 !important;}
.h1ttlja-w{-webkit-text-stroke: 2px #000;}
.h1ttlja.mt100,.h1ttlja-w.mt100 {margin-top: 20px !important;}
.h1ttl.mt100,.h1ttl-w.mt100 {margin-top: 20px !important;}
.origScale {width: 100% !important;height: auto !important;display: inline-block;}
}

.center {text-align: center !important;}
.right {text-align: right !important;}



:root {
/* 必要に応じて数値調整 */
--header-height: 112px;
--header-compact: 50px;
}

@media (min-width: 769px) {
#site-header {
position: relative; /* 通常時は固定しない */
z-index: 1000;
height: var(--header-height);
display: flex;
align-items: center;
gap: 24px;
padding: 0 28px;
background: transparent; /* .transparent 初期想定 */
transition:
height .25s ease,
background-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}

/* PC時のナビ並び */
#site-header nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 24px;
}

#site-header .logo img,
#site-header .logo_capcom img {
display: block;
/* height: calc(var(--header-height) - 32px); */
width: auto;
transition: height .25s ease, opacity .25s ease;
}

/* 上スクロールで出現する固定ヘッダー */
#site-header.is-fixed,
#home header#site-header.is-fixed.is-compact {
position: fixed;
top: 0; left: 0; right: 0;
background: rgba(0,0,0,0.8);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
/* backdrop-filter: saturate(120%) blur(6px); */
}
/* #home header#site-header.is-fixed.is-compact {
background: rgba(0, 0, 0, 0.8);
} */
/* コンパクト化（高さを短く） */
#site-header.is-compact {
height: var(--header-compact);
}

/* コンパクト時は左のロゴを消す */
#site-header.is-compact .logo {
display: none;
}

/* 右側ロゴ（CAPCOM）を少し小さくしたい場合 */
#site-header.is-compact .logo_capcom img {
/* height: calc(var(--header-compact) - 28px); */
display: none;
}

/* 追加される TOP リンクの見た目（任意） */
#site-header nav a[data-topitem="1"] {
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
#site-header, #site-header .logo img { transition: none; }
}
}
@media (min-width: 769px) {
#site-header {
position: relative;
}
/* 線 */
#site-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -44px;
background-image: url(../images/common_head_line.svg);
width: 100%;
height: 44px;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
body.home #site-header::after {
display: none;
}
header#site-header.is-fixed.is-compact::after {
content: none !important; 
}
}

#home header#site-header {
background: transparent;
color: #fff;
transition: background 0.25s ease;
}
@media (max-width: 768px) {
#home header#site-header.is-solid {
background: #000; /* 透過にしたくない場合はそのまま黒 */
}
}


/* 共通：初期は非表示＆オフセットだけ与える（アニメは未開始） */
.title-in {
display: inline-block;
/* white-space: nowrap; */
opacity: 0;
transition: transform 0.4s ease-out, opacity 0.4s ease-out;
will-change: transform, opacity;
}

/* 方向別の開始位置 */
.title-in--left   { transform: translateX(-100%); }
.title-in--right  { transform: translateX(100%); }
.title-in--bottom { transform: translateY(1em); } /* 文字高ぶんだけ下から */

/* 見えたらクラス付与 → そこで初めて動く */
.title-in.is-inview {
opacity: 1;
transform: none;
}

/* SPは速く */
@media (max-width: 768px) {
.title-in { transition-duration: 0.3s; }
.sub_container-pd {
padding-bottom: 10vh !important;
}
}

/* 動きを減らすユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
.title-in { transition: none; opacity: 1; transform: none; }
}



#about .sub_container-pd,
#policy .sub_container-pd,
#recruit-career-job .sub_container-pd,
#recruit-new-job .sub_container-pd,
#recruit-single-career-job .sub_container-pd,
#recruit-single-new-job .sub_container-pd,
#recruit-works-place .sub_container-pd{
padding-bottom: 30vh!important;
}

.sub_container-pd--contact{
padding-bottom: 20vh!important;
}

#about .sub_container,#policy .sub_container {
padding-top: 20px!important;
}
@media (max-width: 768px) {
#about .sub_container,#policy .sub_container {
padding-top: 20px!important;
}
}



/* メッセージのアニメーション */
/* 親：行間で“バーとバーの隙間”を作る */
.reveal-lines {
display: block;
margin: 0 auto;
line-height: 1.8;                 /* ← 行間（隙間）をここで確保 */
--bar-dur: .75s;                  /* ← 速度UP（以前の1.2s → 0.75s） */
--easing: cubic-bezier(.2,.6,.2,1);
max-width: 760px;
}

#home .reveal-lines {
margin: 0 auto 0 0;
}

/* 各行 */
.reveal-line {
position: relative;
display: block;
width: fit-content;
overflow: hidden;
/* 行内の文字の“実高さ”を1emに固定しておくとバーと揃いやすい */
}

/* 走る色付きバー（高さ=1.2em、行の中央に配置） */
.reveal-line .mask {
position: absolute;
left: 0; right: 0;
top: 50%;
height: 1.2em;                    /* ← 文字高さより少し太めに変更 */
background: var(--bar-color, #d80000);
transform: translate(-102%, -50%);
will-change: transform;
pointer-events: none;
}

/* テキストは行内で高さ1emに（=バーとぴったり） */
.reveal-line .text {
display: inline-block;
line-height: 1.8;
transform: translate3d(-8px, 10px, 0);
opacity: 0;
will-change: transform, opacity;
}

/* アクティブ（JSが .active を付与） */
.reveal-line.active .mask {
animation: sweep var(--bar-dur) var(--easing) both;
animation-delay: var(--delay, 0s);
}
.reveal-line.active .text {
animation: textIn .4s var(--easing) both; /* ← 0.6s → 0.4s に短縮 */
/* バーの60%地点あたりで文字出現 → 少し早めにしたいなら 0.5 に */
animation-delay: calc(var(--delay, 0s) + (var(--bar-dur) * 0.5));
}

/* バー：左→覆う→右へ抜ける（縦中央は維持） */
@keyframes sweep {
0%   { transform: translate(-102%, -50%); }
50%  { transform: translate(0%,    -50%); }
100% { transform: translate(102%,  -50%); }
}

/* 文字：左下からスッと出る（速く） */
@keyframes textIn {
0%   { transform: translate3d(-8px, 10px, 0); opacity: 0; }
100% { transform: translate3d(0, 0, 0);       opacity: 1; }
}

/* 動きを減らす設定の人には即表示 */
@media (prefers-reduced-motion: reduce) {
.reveal-line .mask { display: none; }
.reveal-line .text { transform: none; opacity: 1; }
}

@media (max-width: 600px) {
.reveal-lines.pc{display: none;}
.reveal-lines.sp{display: block;}
.reveal-line .mask{height:100%;}
}
.br_span{
display: inline-block;
}
.wpcf7-not-valid-tip{
padding-top: 2px!important;
}