@keyframes slideInLeftText {
0% { opacity: 0; transform: translateX(-150px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInCenterText {
0% { opacity: 0; transform: translateX(calc(50vw - 50%)); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes truckFadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
} .yskk-force-overlay {
position: absolute;
top: 180px; left: 0;
width: 100%;
z-index: 9999;
pointer-events: none;
overflow: visible;
}
.sp-header-bg-container {
display: none; }
.yskk-header-inner-1200 {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.yskk-flex-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
} .header-content-item {
background: rgba(255, 255, 255, 0.95);
padding: 0.15em 1.2em !important;
font-size: 24px;
color: #333;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
border-radius: 4px;
pointer-events: auto;
position: relative;
display: table;
opacity: 0;
white-space: nowrap;
line-height: 1.3;
}
.header-content-item h1:not(.header-cv-button),
.header-content-item h2:not(.header-cv-button),
.header-content-item h3:not(.header-cv-button),
.header-content-item p:not(.header-cv-button) {
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: 1.3 !important;
color: inherit !important;
}
.header-content-item:nth-child(1) { margin-left: 0; }
.header-content-item:nth-child(2) { margin-left: 40px; }
.header-content-item:nth-child(3) { margin-left: 80px; } .header-content-item::before,
.header-content-item::after {
content: "";
position: absolute;
width: 220px;
height: 140px;
background-size: contain;
background-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
z-index: 10001;
}
.header-content-item:nth-child(1)::after,
.header-content-item:nth-child(3)::after {
background-image: url(//yskk.co.jp/wp-content/themes/yskk/assets/img/car_r.png);
right: -210px;
}
.header-content-item:nth-child(2)::before {
background-image: url(//yskk.co.jp/wp-content/themes/yskk/assets/img/car_l.png);
left: -135px;
} .header-content-item:nth-child(4) {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
position: absolute !important;
top: 335px !important;
left: 100px !important;
margin-top: 0 !important;
opacity: 0;
}
.header-cv-button {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 18px 60px !important;
background: #fff !important;
border: 0px solid #C6E2BF;
border-radius: 50px;
font-size: 16px;
color: #333 !important;
text-decoration: none;
} .header-content-item:nth-child(1) { animation: slideInLeftText 1.7s ease-out 1.2s forwards !important; }
.header-content-item:nth-child(1)::after { animation: truckFadeOut 0.4s ease-in 2.9s forwards !important; }
.header-content-item:nth-child(2) { animation: slideInCenterText 1.7s ease-out 3.0s forwards !important; }
.header-content-item:nth-child(2)::before { animation: truckFadeOut 0.4s ease-in 4.7s forwards !important; }
.header-content-item:nth-child(3) { animation: slideInLeftText 1.7s ease-out 4.8s forwards !important; }
.header-content-item:nth-child(4) { animation: fadeInUp 1.7s ease-out 6.6s forwards !important; } @media (max-width: 768px) { .home .ys-header__media,
.home .ys-header-media,
.home .ys-hero,
.home [class*="ys-header__media"],
.home [class*="header-media"] {
display: none !important;
} .home header,
.home .site-header,
.home #site-header,
.home [class*="ys-header"]:first-of-type {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 99999 !important;
} body:not(.home) header,
body:not(.home) .site-header,
body:not(.home) #site-header,
body:not(.home) [class*="ys-header"]:first-of-type {
position: relative !important;
top: auto !important;
left: auto !important;
width: auto !important;
z-index: auto !important;
} body:not(.home) .ys-header__media,
body:not(.home) .ys-header-media,
body:not(.home) .ys-hero,
body:not(.home) [class*="ys-header__media"],
body:not(.home) [class*="header-media"] {
display: block !important;
}
.yskk-force-overlay {
position: relative;
top: 50px;
left: auto;
width: 100%;
height: 120vw;
margin-top: 0px;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
body.home {
padding-top: 0;
} .sp-header-bg-container {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.sp-only-bg-wrapper {
width: 100%;
height: 100%;
display: block;
}
.sp-only-bg-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
} .yskk-header-inner-1200 {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
padding: 20px 10px 0;
pointer-events: none;
} .header-content-item {
font-size: 18px;
max-width: 70%;
white-space: nowrap;
margin-left: 0 !important;
padding: 0.5em 1.2em !important;
pointer-events: auto;
} .header-content-item::before,
.header-content-item::after {
width: 80px;
height: 50px;
top: 50%;
transform: translateY(-55%);
}
.header-content-item:nth-child(1)::after,
.header-content-item:nth-child(3)::after {
right: -65px;
}
.header-content-item:nth-child(2)::before {
left: -45px;
} .header-content-item:nth-child(4) {
margin-top: 70px !important;
opacity: 1 !important;
animation: none !important;
}
.header-cv-button {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 28px !important;
font-size: 13px !important;
max-width: 55vw;
text-align: center;
}
}  .header-cv-button *,
.header-cv-button p,
.header-cv-button span {
margin: 0 !important;
font-size: 14px !important;
line-height: 1 !important;
color: #333 !important;
} @media (min-width: 769px) { :root {
--ystd-content-default-width: 1000px;
}
.entry-content {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.content_main,
.content__main {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.l-section__inner,
.ystdb-section__inner,
.wp-block-group__inner-container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.alignwide {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
} .yskk-header-sns {
display: flex;
align-items: center;
gap: 12px;
position: static;
height: auto;
padding-right: 16px;
margin-left: 16px;
z-index: auto;
pointer-events: auto;
}
.header-sns-item {
display: flex;
align-items: center;
}
.header-sns-item a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
color: #333 !important;
text-decoration: none !important;
transition: opacity 0.2s;
transform: translateY(4px);
}
.header-sns-item a:hover {
opacity: 0.6;
}
.header-sns-item img {
width: 55px !important;
height: 55px !important;
object-fit: contain;
}
@media (max-width: 768px) {
.yskk-header-sns {
position: static;
margin-left: auto;
margin-right: 70px;
gap: 8px;
padding-right: 0;
}
.header-sns-item a {
width: 35px;
height: 35px;
}
.header-sns-item img {
width: 20px !important;
height: 20px !important;
}
} .site-header,
header#masthead,
#site-header {
background-image: url(//yskk.co.jp/wp-content/uploads/2026/02/illust20260225.png) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}