/* ==================== HERO CSS ==================== */
/* ===== SOURCE: briarfus_hero_section 5/assets/css/style.css ===== */
:root {
--cream: #f3ead8;
--orange: #df5536;
--black: #231916;
--white: #fff6e7;
--header-ratio: 15vh;
--visual-ratio: 80vh;
--scroll-ratio: 5vh;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ===== SP final override v19: partner pieces, business visual, mobile portfolio safety ===== */
@media (max-width: 767px) {
.integrated-page .about-block--business,
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(100%, 326px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -14px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 342px) !important;
margin: 0 auto !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 31px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 29px !important;
max-width: 29px !important;
}
.integrated-page .business-item__text {
text-align: left !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.7vw, 19px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(112px, 43vw, 164px) !important;
opacity: .28 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 38% !important;
left: -15vw !important;
}
.integrated-page .top-partner-piece--partner {
top: 39% !important;
right: -15vw !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
/* ===== SP final override v23: partner pieces and mobile portfolio modal ===== */
@media (max-width: 767px) {
.integrated-page .top-partner-piece {
width: clamp(120px, 46vw, 172px) !important;
opacity: .30 !important;
z-index: 2 !important;
pointer-events: none !important;
}
.integrated-page .top-partner-piece--bria {
top: 33% !important;
left: -12px !important;
}
.integrated-page .top-partner-piece--partner {
top: 34% !important;
right: -12px !important;
}
.integrated-page .portfolio-mobile__lead {
display: none !important;
}
.integrated-page .portfolio-mobile__tap {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 68px !important;
height: 38px !important;
margin: 14px auto 22px !important;
padding: 0 !important;
border: 3px solid var(--black) !important;
border-radius: 999px !important;
background: var(--cream) !important;
color: var(--black) !important;
font-size: 18px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
text-align: center !important;
box-shadow: 5px 5px 0 var(--black) !important;
transform: none !important;
}
.integrated-page .portfolio-mobile__tap::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: -9px !important;
width: 14px !important;
height: 14px !important;
background: var(--cream) !important;
border-right: 3px solid var(--black) !important;
border-bottom: 3px solid var(--black) !important;
transform: translateX(-50%) rotate(45deg) !important;
box-sizing: border-box !important;
}
.integrated-page .portfolio-mobile__rail {
gap: 16px !important;
padding: 8px max(18px, calc((100vw - 340px) / 2)) 18px !important;
}
.integrated-page .portfolio-mobile-vhs {
flex: 0 0 clamp(142px, 40vw, 166px) !important;
min-height: clamp(360px, 69vh, 465px) !important;
padding: 18px 14px 16px 38px !important;
}
.integrated-page .portfolio-mobile-vhs__title {
max-height: 250px !important;
font-size: clamp(18px, 5.3vw, 22px) !important;
}
.integrated-page .portfolio-mobile-vhs__client {
font-size: 11px !important;
}
html.portfolio-modal-lock,
body.portfolio-modal-lock {
overflow: hidden !important;
overscroll-behavior: none !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
}
body.portfolio-modal-lock .site-header {
pointer-events: none !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
}
.portfolio-modal__backdrop {
position: fixed !important;
inset: 0 !important;
background: rgba(35, 25, 22, .84) !important;
}
.portfolio-modal__panel {
width: min(calc(100vw - 22px), 390px) !important;
max-height: 90vh !important;
padding: 12px !important;
box-sizing: border-box !important;
overscroll-behavior: contain !important;
}
.portfolio-modal__bar {
grid-template-columns: 44px 1fr 44px 44px !important;
gap: 6px !important;
}
.portfolio-modal__nav {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 38px !important;
min-width: 44px !important;
min-height: 38px !important;
padding: 0 !important;
border: 2px solid var(--black) !important;
background: transparent !important;
color: var(--black) !important;
box-shadow: none !important;
font-size: 18px !important;
line-height: 1 !important;
}
.portfolio-modal__nav--prev,
.portfolio-modal__nav--next {
width: 44px !important;
height: 38px !important;
}
.portfolio-modal-tv__screen {
top: 14.8% !important;
left: 8.2% !important;
width: 59.8% !important;
height: 65.8% !important;
border-radius: 8% / 12% !important;
}
.portfolio-modal-tv__image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
.portfolio-modal__info {
margin-top: 10px !important;
padding: 14px 14px 16px !important;
border: 3px solid var(--black) !important;
background: var(--cream) !important;
box-sizing: border-box !important;
}
.portfolio-modal__description {
margin-top: 8px !important;
line-height: 1.65 !important;
}
}
/* ===== SP final override v31: partner pieces, business visual, mobile portfolio ===== */
@media (max-width: 767px) {
html,
body,
.integrated-page {
overflow-x: hidden !important;
}
.integrated-page .top-partner-section {
overflow: hidden !important;
}
.integrated-page .top-partner-pieces {
pointer-events: none !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece {
display: block !important;
width: clamp(118px, 44vw, 162px) !important;
opacity: .24 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 2% !important;
left: -8px !important;
}
.integrated-page .top-partner-piece--partner {
top: 3% !important;
right: -8px !important;
}
.integrated-page .top-partner-section__header,
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .about-block--business,
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-layout {
margin-top: -12px !important;
}
.integrated-page .business-visual {
position: relative !important;
width: min(100%, 334px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -42px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 4 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 3 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 2 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 1 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 366px) !important;
margin: -6px auto 0 !important;
padding-left: 14px !important;
gap: 7px !important;
}
.integrated-page .business-item {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 8px !important;
text-align: left !important;
}
.integrated-page .business-item__line,
.integrated-page .business-item__line::after {
display: none !important;
}
.integrated-page .business-item__icon {
width: 38px !important;
max-width: 38px !important;
height: auto !important;
justify-self: center !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(17px, 5.55vw, 23px) !important;
line-height: 1.12 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
padding-bottom: 44px !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
margin-top: 10px !important;
padding-top: 26px !important;
}
.integrated-page .portfolio-mobile__lead {
width: min(86vw, 330px) !important;
margin: 0 auto 16px !important;
color: var(--cream) !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.85 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile__tap {
position: relative !important;
width: 74px !important;
height: 42px !important;
margin: 0 auto 12px !important;
border: 3px solid var(--black) !important;
border-radius: 50% !important;
background: var(--cream) !important;
color: var(--orange) !important;
font-size: 19px !important;
font-weight: 900 !important;
line-height: 38px !important;
text-align: center !important;
box-shadow: 5px 5px 0 rgba(35, 25, 22, .45) !important;
animation: portfolioTapFloat 2.2s ease-in-out infinite !important;
}
.integrated-page .portfolio-mobile__tap::after {
content: "" !important;
position: absolute !important;
left: 14px !important;
bottom: -10px !important;
width: 16px !important;
height: 16px !important;
background: var(--cream) !important;
border-right: 3px solid var(--black) !important;
border-bottom: 3px solid var(--black) !important;
transform: rotate(36deg) !important;
}
.integrated-page .portfolio-mobile__rail {
display: flex !important;
gap: 14px !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 6px max(18px, calc((100vw - 375px) / 2 + 18px)) 12px !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
box-sizing: border-box !important;
}
.integrated-page .portfolio-mobile__rail::-webkit-scrollbar {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs {
flex: 0 0 136px !important;
width: 136px !important;
min-height: 292px !important;
border: 3px solid var(--black) !important;
border-radius: 6px !important;
background:
linear-gradient(90deg, #151515 0 24px, transparent 24px),
linear-gradient(180deg, #f3ead8 0 70%, #c95f3f 70% 100%) !important;
box-shadow: 5px 5px 0 rgba(35, 25, 22, .5) !important;
color: var(--black) !important;
cursor: pointer !important;
display: grid !important;
grid-template-columns: 30px 1fr !important;
grid-template-rows: auto 1fr auto !important;
gap: 8px !important;
padding: 12px 10px 12px 28px !important;
scroll-snap-align: start !important;
text-align: left !important;
touch-action: pan-x !important;
}
.integrated-page .portfolio-mobile-vhs:focus-visible {
outline: 3px solid var(--cream) !important;
outline-offset: 4px !important;
}
.integrated-page .portfolio-mobile-vhs__spine {
grid-row: 1 / 4 !important;
grid-column: 1 !important;
position: relative !important;
}
.integrated-page .portfolio-mobile-vhs__spine::before {
content: "" !important;
position: absolute !important;
top: 10px !important;
left: -18px !important;
width: 18px !important;
height: 18px !important;
border: 3px solid #777 !important;
border-radius: 50% !important;
background: radial-gradient(circle at center, #ddd 0 3px, #555 4px 8px, transparent 9px) !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
grid-column: 2 !important;
display: flex !important;
justify-content: space-between !important;
gap: 6px !important;
color: var(--orange) !important;
font-size: 9px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
.integrated-page .portfolio-mobile-vhs__title {
grid-column: 2 !important;
align-self: center !important;
justify-self: center !important;
max-height: 176px !important;
color: var(--black) !important;
font-size: clamp(15px, 4.4vw, 18px) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
overflow: hidden !important;
}
.integrated-page .portfolio-mobile-vhs__client {
grid-column: 2 !important;
color: var(--cream) !important;
font-size: 12px !important;
font-weight: 900 !important;
line-height: 1.25 !important;
}
.integrated-page .portfolio-mobile__hint {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
color: rgba(35, 25, 22, .65) !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
text-align: center !important;
}
.portfolio-modal {
display: none !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(35, 25, 22, .82) !important;
}
.portfolio-modal__panel {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: min(92vw, 390px) !important;
max-height: 90vh !important;
overflow-y: auto !important;
transform: translate(-50%, -50%) !important;
border: 3px solid var(--black) !important;
border-radius: 8px !important;
background: var(--yellow) !important;
box-shadow: 8px 8px 0 rgba(0, 0, 0, .4) !important;
padding: 12px !important;
overscroll-behavior: contain !important;
}
.portfolio-modal__bar {
display: grid !important;
grid-template-columns: 44px 1fr 44px 44px !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.portfolio-modal__nav,
.portfolio-modal__close {
min-width: 44px !important;
min-height: 44px !important;
border: 2px solid var(--black) !important;
border-radius: 50% !important;
background: var(--cream) !important;
color: var(--black) !important;
font-size: 20px !important;
font-weight: 900 !important;
}
.portfolio-modal__close {
background: var(--orange) !important;
color: var(--cream) !important;
}
.portfolio-modal__count {
margin: 0 !important;
color: var(--black) !important;
font-size: 13px !important;
font-weight: 900 !important;
text-align: center !important;
}
.portfolio-modal-tv {
position: relative !important;
width: 100% !important;
aspect-ratio: 1.23 / 1 !important;
margin: 0 auto 12px !important;
}
.portfolio-modal-tv__screen {
position: absolute !important;
top: 20.5% !important;
left: 10.8% !important;
width: 58.5% !important;
height: 55% !important;
overflow: hidden !important;
border-radius: 9% / 12% !important;
background: #111 !important;
z-index: 1 !important;
}
.portfolio-modal-tv__image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.portfolio-modal-tv__noise {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 3px) !important;
opacity: 0 !important;
z-index: 2 !important;
}
.portfolio-modal-tv__noise.is-active {
animation: portfolioNoise .36s steps(3) !important;
}
.portfolio-modal-tv__frame {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
z-index: 3 !important;
pointer-events: none !important;
}
.portfolio-modal__info {
border: 3px solid var(--black) !important;
background: var(--cream) !important;
padding: 16px !important;
}
.portfolio-modal__category {
margin: 0 0 6px !important;
color: var(--orange) !important;
font-size: 11px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
.portfolio-modal__title {
margin: 0 0 6px !important;
color: var(--black) !important;
font-size: 21px !important;
font-weight: 900 !important;
line-height: 1.25 !important;
}
.portfolio-modal__client,
.portfolio-modal__description {
margin: 0 !important;
color: var(--black) !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.75 !important;
}
.portfolio-modal__client {
margin-bottom: 8px !important;
}
.portfolio-modal__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
margin-top: 14px !important;
padding: 0 20px !important;
border-radius: 999px !important;
background: var(--black) !important;
color: var(--cream) !important;
font-size: 12px !important;
font-weight: 900 !important;
text-decoration: none !important;
}
.portfolio-modal__link.is-hidden {
display: none !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.integrated-page .portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.portfolio-mobile__tap,
.portfolio-modal-tv__noise.is-active {
animation: none !important;
}
}
@keyframes portfolioTapFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes portfolioNoise {
0% {
opacity: .45;
transform: translateX(0);
}
50% {
opacity: .18;
transform: translateX(2px);
}
100% {
opacity: 0;
transform: translateX(-2px);
}
}
/* ===== SP final override v24: partner pieces / business visual / mobile portfolio modal ===== */
@media (max-width: 767px) {
.integrated-page .top-partner-section {
overflow: hidden !important;
}
.integrated-page .top-partner-pieces {
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.integrated-page .top-partner-piece {
width: clamp(128px, 48vw, 178px) !important;
opacity: .24 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 36% !important;
left: -18px !important;
}
.integrated-page .top-partner-piece--partner {
top: 37% !important;
right: -18px !important;
}
.integrated-page .top-partner-header,
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .business-layout {
margin-top: -8px !important;
}
.integrated-page .business-visual {
width: min(100%, 336px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -30px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 358px) !important;
margin: -8px auto 0 !important;
padding-left: 16px !important;
gap: 7px !important;
}
.integrated-page .business-item {
grid-template-columns: 36px minmax(0, 1fr) !important;
column-gap: 8px !important;
text-align: left !important;
}
.integrated-page .business-item__line,
.integrated-page .business-item__line::after {
display: none !important;
}
.integrated-page .business-item__icon {
width: 34px !important;
max-width: 34px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .business-item:hover .business-item__text,
.integrated-page .business-item.is-active .business-item__text {
transform: none !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(16px, 5.1vw, 22px) !important;
line-height: 1.12 !important;
}
.integrated-page .portfolio-section {
padding: 42px 0 54px !important;
overflow: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
padding-inline: 18px !important;
}
.integrated-page .portfolio-mobile__lead {
margin: 12px auto 0 !important;
max-width: 300px !important;
color: var(--cream) !important;
text-align: center !important;
font-size: 13px !important;
line-height: 1.85 !important;
font-weight: 900 !important;
}
.integrated-page .portfolio-mobile__tap {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 74px !important;
height: 42px !important;
margin: 18px auto 14px !important;
border: 3px solid var(--black) !important;
border-radius: 999px !important;
background: var(--cream) !important;
color: var(--black) !important;
font-size: 18px !important;
font-weight: 950 !important;
letter-spacing: .05em !important;
box-shadow: 5px 5px 0 var(--black) !important;
animation: portfolioTapFloat 1.9s ease-in-out infinite !important;
}
.integrated-page .portfolio-mobile__tap::after {
content: "" !important;
position: absolute !important;
bottom: -9px !important;
left: 50% !important;
width: 16px !important;
height: 16px !important;
background: var(--cream) !important;
border-right: 3px solid var(--black) !important;
border-bottom: 3px solid var(--black) !important;
transform: translateX(-50%) rotate(45deg) !important;
}
.integrated-page .portfolio-mobile__rail {
display: flex !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
width: 100% !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 6px 18px 14px !important;
scroll-snap-type: x mandatory !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
box-sizing: border-box !important;
}
.integrated-page .portfolio-mobile__rail::-webkit-scrollbar {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs {
position: relative !important;
flex: 0 0 136px !important;
width: 136px !important;
height: 292px !important;
padding: 16px 13px !important;
border: 3px solid var(--black) !important;
border-radius: 5px !important;
background: var(--cream) !important;
color: var(--black) !important;
box-shadow: 6px 6px 0 rgba(35, 25, 22, .35) !important;
scroll-snap-align: start !important;
touch-action: pan-x !important;
cursor: pointer !important;
display: grid !important;
grid-template-rows: auto 1fr auto !important;
gap: 10px !important;
text-align: left !important;
appearance: none !important;
}
.integrated-page .portfolio-mobile-vhs:focus-visible {
outline: 3px solid var(--blue) !important;
outline-offset: 3px !important;
}
.integrated-page .portfolio-mobile-vhs__spine {
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 18px !important;
background: var(--black) !important;
}
.integrated-page .portfolio-mobile-vhs__spine::before {
content: "" !important;
position: absolute !important;
top: 18px !important;
left: 50% !important;
width: 10px !important;
height: 10px !important;
border: 2px solid rgba(243, 234, 216, .75) !important;
border-radius: 50% !important;
transform: translateX(-50%) !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
display: flex !important;
justify-content: space-between !important;
gap: 6px !important;
margin-left: 20px !important;
color: var(--orange) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 950 !important;
writing-mode: horizontal-tb !important;
}
.integrated-page .portfolio-mobile-vhs__title {
display: block !important;
align-self: center !important;
justify-self: center !important;
max-height: 172px !important;
color: var(--black) !important;
font-size: 18px !important;
line-height: 1.24 !important;
font-weight: 950 !important;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
overflow: hidden !important;
}
.integrated-page .portfolio-mobile-vhs__client {
display: block !important;
margin-left: 20px !important;
color: var(--black) !important;
font-size: 12px !important;
line-height: 1.35 !important;
font-weight: 950 !important;
}
.integrated-page .portfolio-mobile__hint {
display: block !important;
margin: 0 auto !important;
color: rgba(35, 25, 22, .55) !important;
text-align: center !important;
font-size: 12px !important;
font-weight: 950 !important;
letter-spacing: .14em !important;
}
.portfolio-modal {
display: none !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(35, 25, 22, .78) !important;
}
.portfolio-modal__panel {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: min(calc(100vw - 24px), 390px) !important;
max-height: 90vh !important;
overflow-y: auto !important;
padding: 14px !important;
border: 3px solid var(--black) !important;
border-radius: 8px !important;
background: var(--cream) !important;
box-shadow: 8px 8px 0 rgba(35, 25, 22, .45) !important;
transform: translate(-50%, -50%) !important;
overscroll-behavior: contain !important;
}
.portfolio-modal__bar {
display: grid !important;
grid-template-columns: 44px 44px 1fr 44px !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.portfolio-modal__nav,
.portfolio-modal__close {
min-width: 44px !important;
min-height: 44px !important;
border: 2px solid var(--black) !important;
border-radius: 999px !important;
background: var(--orange) !important;
color: var(--cream) !important;
font-size: 18px !important;
font-weight: 950 !important;
}
.portfolio-modal__close {
justify-self: end !important;
}
.portfolio-modal__count {
margin: 0 !important;
text-align: center !important;
color: var(--black) !important;
font-size: 13px !important;
font-weight: 950 !important;
}
.portfolio-modal-tv {
position: relative !important;
width: 100% !important;
max-width: 332px !important;
margin: 0 auto 10px !important;
}
.portfolio-modal-tv__screen {
position: absolute !important;
left: 10.8% !important;
top: 17.5% !important;
width: 59.5% !important;
height: 57.2% !important;
overflow: hidden !important;
border-radius: 8px !important;
background: var(--black) !important;
z-index: 1 !important;
}
.portfolio-modal-tv__image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.portfolio-modal-tv__noise {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, rgba(0, 0, 0, .18) 1px 2px) !important;
}
.portfolio-modal-tv__noise.is-active {
animation: portfolioNoise .36s steps(2, end) !important;
}
.portfolio-modal-tv__frame {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: auto !important;
display: block !important;
pointer-events: none !important;
}
.portfolio-modal__info {
padding: 4px 2px 0 !important;
}
.portfolio-modal__category {
margin: 0 0 6px !important;
color: var(--orange) !important;
font-size: 12px !important;
font-weight: 950 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.portfolio-modal__title {
margin: 0 0 4px !important;
color: var(--black) !important;
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 950 !important;
}
.portfolio-modal__client,
.portfolio-modal__description {
margin: 0 !important;
color: var(--black) !important;
font-size: 13px !important;
line-height: 1.65 !important;
font-weight: 850 !important;
}
.portfolio-modal__client {
margin-bottom: 8px !important;
}
.portfolio-modal__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
margin-top: 14px !important;
padding: 0 18px !important;
border-radius: 999px !important;
background: var(--black) !important;
color: var(--cream) !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 950 !important;
letter-spacing: .08em !important;
}
.portfolio-modal__link.is-hidden {
display: none !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.integrated-page .portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.integrated-page .portfolio-mobile__tap,
.portfolio-modal-tv__noise.is-active {
animation: none !important;
}
}
@keyframes portfolioTapFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes portfolioNoise {
0% {
opacity: .55;
transform: translateX(0);
}
50% {
opacity: .35;
transform: translateX(2px);
}
100% {
opacity: 0;
transform: translateX(0);
}
}
/* ===== SP final override v23: partner pieces, business lift, mobile portfolio modal ===== */
@media (max-width: 767px) {
.integrated-page {
overflow-x: hidden !important;
}
.integrated-page .business-layout {
margin-top: -8px !important;
}
.integrated-page .business-visual {
width: min(100%, 332px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -28px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 350px) !important;
margin: -4px auto 0 !important;
padding-left: 16px !important;
gap: 7px !important;
}
.integrated-page .business-item {
grid-template-columns: 36px minmax(0, 1fr) !important;
column-gap: 8px !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 34px !important;
max-width: 34px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(16px, 5.2vw, 21px) !important;
line-height: 1.12 !important;
}
.integrated-page .top-partner-piece {
width: clamp(116px, 44vw, 164px) !important;
opacity: .27 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 34% !important;
left: -12px !important;
}
.integrated-page .top-partner-piece--partner {
top: 35% !important;
right: -12px !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
min-height: auto !important;
padding: 42px 0 54px !important;
overflow: hidden !important;
}
.integrated-page .portfolio-section__inner {
width: 100% !important;
max-width: none !important;
padding-inline: 0 !important;
overflow: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-header {
margin-bottom: 12px !important;
}
.integrated-page .portfolio-header__title {
font-size: clamp(54px, 18vw, 78px) !important;
line-height: .86 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
}
.integrated-page .portfolio-mobile__lead {
width: min(86vw, 330px) !important;
margin: 0 auto 12px !important;
color: var(--cream) !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.75 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile__tap {
display: block !important;
width: 72px !important;
margin: 0 auto 12px !important;
}
.integrated-page .portfolio-mobile__rail {
display: flex !important;
gap: 14px !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
padding: 6px max(18px, calc((100vw - 340px) / 2)) 16px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.integrated-page .portfolio-mobile__rail::-webkit-scrollbar {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs {
flex: 0 0 132px !important;
min-height: 284px !important;
touch-action: pan-x !important;
scroll-snap-align: start !important;
}
.integrated-page .portfolio-mobile__hint {
display: block !important;
}
.portfolio-modal {
display: none !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(35, 25, 22, .78) !important;
}
.portfolio-modal__panel {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: min(calc(100vw - 24px), 390px) !important;
max-height: 90vh !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
transform: translate(-50%, -50%) !important;
}
.portfolio-modal__link.is-hidden {
display: none !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
/* ===== SP final override v19: partner pieces, business lift, portfolio mobile finish ===== */
@media (max-width: 767px) {
.integrated-page .business-visual {
margin: -12px auto 0 !important;
}
.integrated-page .business-list {
width: min(100%, 342px) !important;
margin: 2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 31px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 29px !important;
max-width: 29px !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.6vw, 19px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
z-index: 1 !important;
width: clamp(116px, 44vw, 168px) !important;
opacity: .26 !important;
}
.integrated-page .top-partner-piece--bria {
top: 39% !important;
left: -18vw !important;
}
.integrated-page .top-partner-piece--partner {
top: 40% !important;
right: -18vw !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-mobile__rail {
max-width: 100vw !important;
box-sizing: border-box !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
}
/* ===== SP final fixes v14: hamburger close, ABOUT centering, Business alignment ===== */
@media (max-width: 767px) {
.integrated-page .site-header__menu-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--orange) !important;
}
.integrated-page .site-header__menu-toggle span {
position: absolute !important;
left: 50% !important;
top: 50% !important;
display: block !important;
width: 28px !important;
height: 3px !important;
margin: 0 !important;
border-radius: 999px !important;
background: currentColor !important;
transform-origin: center !important;
transition: transform .22s ease, opacity .18s ease !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(1) {
transform: translate(-50%, calc(-50% - 7px)) !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(2) {
opacity: 1 !important;
transform: translate(-50%, -50%) !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(3) {
transform: translate(-50%, calc(-50% + 7px)) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(2) {
opacity: 0 !important;
transform: translate(-50%, -50%) scaleX(0) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(3) {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.integrated-page .about-intro__stage {
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
}
.integrated-page .about-intro__parts {
position: relative !important;
left: calc(50% - 50vw) !important;
right: auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
margin: 0 0 -1px !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.integrated-page .business-layout {
display: grid !important;
grid-template-columns: 1fr !important;
width: min(100%, 340px) !important;
margin: 10px auto 0 !important;
padding: 0 0 38px !important;
gap: 0 !important;
justify-items: center !important;
align-items: start !important;
}
.integrated-page .business-visual {
position: relative !important;
width: min(100%, 318px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: 0 auto !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
transform-origin: 50% 50% !important;
}
.integrated-page .business-list {
display: grid !important;
width: min(100%, 318px) !important;
margin: -2px auto 0 !important;
padding: 0 0 0 18px !important;
gap: 4px !important;
justify-items: start !important;
}
.integrated-page .business-item {
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
width: 100% !important;
column-gap: 5px !important;
row-gap: 0 !important;
align-items: center !important;
justify-items: start !important;
text-align: left !important;
transform: none !important;
}
.integrated-page .business-item__line,
.integrated-page .business-item__line::after {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
.integrated-page .business-item__icon {
grid-column: 1 !important;
grid-row: 1 !important;
width: 21px !important;
max-width: 21px !important;
height: auto !important;
justify-self: start !important;
align-self: center !important;
}
.integrated-page .business-item__text {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
justify-self: start !important;
text-align: left !important;
opacity: 1 !important;
transform: none !important;
white-space: normal !important;
}
.integrated-page .business-item:hover .business-item__text,
.integrated-page .business-item.is-active .business-item__text {
transform: none !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
display: block !important;
width: 100% !important;
text-align: left !important;
}
.integrated-page .business-item__text span {
margin: 0 0 2px !important;
font-size: 9px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(13px, 3.7vw, 16px) !important;
line-height: 1.12 !important;
}
}
/* ===== SP final override v17: last-mile placement fixes ===== */
@media (max-width: 767px) {
.integrated-page .about-intro__parts {
position: relative !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
margin-top: 0 !important;
margin-right: calc(50% - 50vw) !important;
margin-bottom: -1px !important;
margin-left: calc(50% - 50vw) !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.integrated-page .about-block--business,
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(100%, 320px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -12px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 342px) !important;
margin: 2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 31px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 29px !important;
max-width: 29px !important;
}
.integrated-page .business-item__text span {
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.6vw, 19px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(116px, 44vw, 168px) !important;
opacity: .26 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -18vw !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -18vw !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
}
/* ===== SP final override v19: partner pieces, business lift, portfolio mobile finish ===== */
@media (max-width: 767px) {
.integrated-page .business-visual {
margin: -12px auto 0 !important;
}
.integrated-page .business-list {
width: min(100%, 342px) !important;
margin: 2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 31px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 29px !important;
max-width: 29px !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.6vw, 19px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
z-index: 1 !important;
width: clamp(116px, 44vw, 168px) !important;
opacity: .26 !important;
}
.integrated-page .top-partner-piece--bria {
top: 39% !important;
left: -18vw !important;
}
.integrated-page .top-partner-piece--partner {
top: 40% !important;
right: -18vw !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-mobile__rail {
max-width: 100vw !important;
box-sizing: border-box !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
}
/* ===== SP portfolio modal + final placement v31 ===== */
.portfolio-mobile,
.portfolio-modal {
display: none;
}
.portfolio-modal__link.is-hidden {
display: none !important;
}
body.portfolio-modal-lock {
position: fixed;
width: 100%;
overflow: hidden;
}
@keyframes portfolioTapFloat {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-5px) rotate(2deg); }
}
@media (max-width: 767px) {
.integrated-page .top-partner-piece {
opacity: .26 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -7px !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -7px !important;
}
.integrated-page .business-visual {
margin-top: -16px !important;
width: min(100%, 322px) !important;
}
.integrated-page .business-list {
width: min(100%, 344px) !important;
margin-top: 0 !important;
padding-left: 22px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 31px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 29px !important;
max-width: 29px !important;
}
.integrated-page .business-item__text span {
font-size: 10.5px !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.55vw, 19px) !important;
}
.integrated-page .portfolio-section {
min-height: auto !important;
padding: 46px 0 56px !important;
overflow: hidden !important;
}
.integrated-page .portfolio-section__inner {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-header {
margin-bottom: 12px !important;
}
.integrated-page .portfolio-header__title {
font-size: clamp(54px, 18vw, 78px) !important;
line-height: .86 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative;
z-index: 3;
}
.portfolio-mobile__lead {
width: min(86vw, 330px);
margin: 0 auto 12px;
color: var(--cream);
font-size: 13px;
font-weight: 800;
line-height: 1.75;
text-align: center;
}
.portfolio-mobile__tap {
position: relative;
width: 72px;
margin: 0 auto 10px;
padding: 9px 0 8px;
border: 3px solid var(--black);
border-radius: 999px;
background: var(--cream);
box-shadow: 4px 4px 0 var(--black);
color: var(--orange);
font-size: 18px;
font-weight: 900;
line-height: 1;
text-align: center;
animation: portfolioTapFloat 2.3s ease-in-out infinite;
}
.portfolio-mobile__tap::after {
content: "";
position: absolute;
right: 12px;
bottom: -10px;
width: 14px;
height: 14px;
border-right: 3px solid var(--black);
border-bottom: 3px solid var(--black);
background: var(--cream);
transform: rotate(45deg);
}
.portfolio-mobile__rail {
display: flex;
gap: 14px;
width: 100%;
padding: 6px max(18px, calc((100vw - 340px) / 2)) 14px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.portfolio-mobile__rail::-webkit-scrollbar {
display: none;
}
.portfolio-mobile-vhs {
position: relative;
display: grid;
flex: 0 0 132px;
grid-template-rows: auto 1fr auto;
min-height: 284px;
padding: 15px 13px 14px 34px;
border: 3px solid var(--black);
border-radius: 4px;
background: var(--cream);
box-shadow: 5px 5px 0 var(--black);
color: var(--black);
text-align: left;
scroll-snap-align: start;
}
.portfolio-mobile-vhs:focus-visible {
outline: 3px solid #fff;
outline-offset: 4px;
}
.portfolio-mobile-vhs__spine {
position: absolute;
inset: 0 auto 0 0;
width: 24px;
background: #231916;
}
.portfolio-mobile-vhs__spine::before {
content: "";
position: absolute;
top: 14px;
left: 50%;
width: 14px;
height: 14px;
border: 2px solid rgba(243, 234, 216, .75);
border-radius: 50%;
transform: translateX(-50%);
}
.portfolio-mobile-vhs__meta {
display: flex;
flex-direction: column;
gap: 3px;
color: var(--orange);
font-size: 10px;
font-weight: 900;
line-height: 1.15;
text-transform: uppercase;
}
.portfolio-mobile-vhs__title {
justify-self: center;
max-height: 164px;
margin: 10px 0;
overflow: hidden;
color: var(--black);
font-size: clamp(17px, 5vw, 20px);
font-weight: 900;
line-height: 1.08;
writing-mode: vertical-rl;
text-orientation: mixed;
}
.portfolio-mobile-vhs__client {
color: var(--black);
font-size: 12px;
font-weight: 900;
line-height: 1.25;
}
.portfolio-mobile__hint {
margin: 0 auto;
color: rgba(35, 25, 22, .72);
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-align: center;
}
.portfolio-modal.is-open {
display: block;
position: fixed;
inset: 0;
z-index: 10000;
}
.portfolio-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(35, 25, 22, .78);
}
.portfolio-modal__panel {
position: absolute;
top: 50%;
left: 50%;
width: min(calc(100vw - 24px), 390px);
max-height: 90vh;
padding: 12px;
overflow-y: auto;
border: 3px solid var(--black);
border-radius: 6px;
background: var(--cream);
box-shadow: 8px 8px 0 rgba(35, 25, 22, .55);
transform: translate(-50%, -50%);
}
.portfolio-modal__bar {
display: grid;
grid-template-columns: 44px 1fr 44px 44px;
gap: 6px;
align-items: center;
margin-bottom: 10px;
}
.portfolio-modal__nav,
.portfolio-modal__close {
min-width: 44px;
min-height: 44px;
border: 2px solid var(--black);
border-radius: 999px;
background: var(--cream);
color: var(--black);
font-size: 20px;
font-weight: 900;
}
.portfolio-modal__close {
background: var(--orange);
color: var(--cream);
}
.portfolio-modal__count {
margin: 0;
color: var(--black);
font-size: 14px;
font-weight: 900;
text-align: center;
}
.portfolio-modal-tv {
position: relative;
width: 100%;
aspect-ratio: 1.18 / 1;
margin: 0 auto 12px;
}
.portfolio-modal-tv__screen {
position: absolute;
top: 13.5%;
left: 7.5%;
z-index: 1;
width: 61.5%;
height: 70%;
overflow: hidden;
border-radius: 8% / 12%;
background: #111;
}
.portfolio-modal-tv__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio-modal-tv__noise {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
radial-gradient(circle, rgba(255,255,255,.26), transparent 56%);
mix-blend-mode: screen;
}
.portfolio-modal-tv__noise.is-active {
animation: crtNoiseFlash .36s steps(2, end);
}
.portfolio-modal-tv__frame {
position: absolute;
inset: 0;
z-index: 3;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.portfolio-modal__info {
color: var(--black);
}
.portfolio-modal__category {
margin: 0 0 5px;
color: var(--orange);
font-size: 11px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.portfolio-modal__title {
margin: 0 0 4px;
color: var(--black);
font-size: 22px;
font-weight: 900;
line-height: 1.2;
}
.portfolio-modal__client,
.portfolio-modal__description {
margin: 0;
color: var(--black);
font-size: 13px;
font-weight: 800;
line-height: 1.75;
}
.portfolio-modal__client {
margin-bottom: 8px;
}
.portfolio-modal__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 14px;
padding: 0 22px;
border-radius: 999px;
background: var(--black);
color: var(--cream);
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.portfolio-mobile__tap {
animation: none !important;
}
.portfolio-modal-tv__noise.is-active {
animation: none !important;
}
}
/* ===== SP final override v16: full-width ABOUT image, layered Business triangles, lower Partner pieces ===== */
@media (max-width: 767px) {
.integrated-page .about-intro__stage {
overflow: hidden !important;
}
.integrated-page .about-intro__parts {
position: relative !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
margin-top: 0 !important;
margin-right: calc(50% - 50vw) !important;
margin-bottom: -1px !important;
margin-left: calc(50% - 50vw) !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.integrated-page .about-block--business,
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(100%, 320px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: 0 auto !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 330px) !important;
margin: 4px auto 0 !important;
padding-left: 20px !important;
gap: 5px !important;
}
.integrated-page .business-item {
grid-template-columns: 27px minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.integrated-page .business-item__icon {
width: 25px !important;
max-width: 25px !important;
}
.integrated-page .business-item__text span {
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(14px, 4.2vw, 18px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
opacity: .28 !important;
}
.integrated-page .top-partner-piece--bria {
top: 47% !important;
left: -8px !important;
}
.integrated-page .top-partner-piece--partner {
top: 48% !important;
right: -8px !important;
}
}
/* ===== SP final override v21: mobile partner/business/portfolio final ===== */
@media (max-width: 767px) {
.integrated-page .business-layout {
margin-top: 2px !important;
}
.integrated-page .business-visual {
width: min(100%, 326px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -16px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 346px) !important;
margin: -2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 32px minmax(0, 1fr) !important;
column-gap: 7px !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 30px !important;
max-width: 30px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 10.5px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.8vw, 20px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(118px, 46vw, 170px) !important;
opacity: .28 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -10px !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -10px !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
/* ===== SP final override v20: mobile partner, business, portfolio modal ===== */
@media (max-width: 767px) {
.integrated-page .business-layout {
margin-top: 2px !important;
}
.integrated-page .business-visual {
width: min(100%, 326px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -16px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 346px) !important;
margin: -2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 32px minmax(0, 1fr) !important;
column-gap: 7px !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 30px !important;
max-width: 30px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 10.5px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.8vw, 20px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(118px, 46vw, 170px) !important;
opacity: .28 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -10px !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -10px !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
/* ===== SP final override v19: partner/business/portfolio mobile finish ===== */
@media (max-width: 767px) {
.integrated-page .business-layout {
margin-top: 2px !important;
}
.integrated-page .business-visual {
width: min(100%, 326px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -16px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 346px) !important;
margin: -2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 32px minmax(0, 1fr) !important;
column-gap: 7px !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 30px !important;
max-width: 30px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 10.5px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.8vw, 20px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(118px, 46vw, 170px) !important;
opacity: .28 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -10px !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -10px !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
min-width: 320px;
min-height: 100%;
margin: 0;
}
body {
background: var(--cream);
color: var(--black);
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
.hero-page {
width: 100vw;
height: 100vh;
background: var(--cream);
overflow: hidden;
}
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: var(--header-ratio);
padding: clamp(18px, 2vw, 32px) clamp(28px, 4.6vw, 72px);
display: flex;
align-items: flex-start;
justify-content: space-between;
background: var(--cream);
}
.site-header__logo {
display: block;
width: clamp(240px, 28vw, 440px);
}
.site-header__logo img {
width: 100%;
height: auto;
}
.site-header__nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(28px, 4.4vw, 72px);
padding-top: .42em;
color: var(--orange);
font-size: clamp(18px, 1.55vw, 29px);
font-weight: 900;
line-height: 1;
letter-spacing: -.015em;
white-space: nowrap;
}
.site-header__nav a {
position: relative;
}
.site-header__nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 100%;
height: 3px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .45s var(--ease);
}
.site-header__nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.hero-visual {
position: relative;
z-index: 1;
width: 100vw;
height: var(--visual-ratio);
margin-top: var(--header-ratio);
overflow: hidden;
isolation: isolate;
}
.hero-visual__slides,
.hero-visual__slide,
.hero-visual__slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-visual__slide {
opacity: 0;
transform: scale(1.035);
transition: opacity 1.2s var(--ease), transform 6.6s linear;
}
.hero-visual__slide.is-active {
opacity: 1;
transform: scale(1);
}
.hero-visual__slide img {
object-fit: cover;
object-position: center top;
}
.hero-visual__overlay {
position: absolute;
inset: 0;
z-index: 2;
background: rgba(223, 85, 54, .18);
mix-blend-mode: multiply;
pointer-events: none;
}
.hero-visual__semicircle {
position: absolute;
left: 0;
top: 50%;
z-index: 5;
width: clamp(150px, 14.6vw, 280px);
height: clamp(300px, 29.2vw, 560px);
border-radius: 0 999px 999px 0;
background: var(--cream);
transform: translateY(-50%);
display: grid;
place-items: center;
}
.hero-visual__semicircle img {
width: 47%;
transform: translateX(-4%);
}
.hero-visual__copy {
position: absolute;
left: clamp(230px, 14.9vw, 330px);
top: 50%;
z-index: 8;
transform: translateY(-50%);
margin: 0;
color: var(--black);
font-size: clamp(42px, 4.65vw, 86px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -.04em;
}
.hero-visual__piece-grid {
position: absolute;
left: 50%;
top: 50%;
z-index: 7;
transform: translate(-45%, -50%);
width: min(43vw, 690px);
height: min(43vw, 690px);
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: clamp(4px, .35vw, 8px);
}
.piece {
flex: 0 0 calc((100% - 4 * clamp(4px, .35vw, 8px)) / 5);
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
}
.piece img {
width: 100%;
height: 100%;
object-fit: contain;
}
.piece--empty {
opacity: 0;
}
.hero-visual__vertical-title {
position: absolute;
right: clamp(20px, 3.1vw, 54px);
top: 50%;
z-index: 8;
transform: translateY(-50%);
margin: 0;
color: var(--white);
writing-mode: vertical-rl;
text-orientation: upright;
font-size: clamp(52px, 5.25vw, 104px);
font-weight: 950;
line-height: .9;
letter-spacing: -.03em;
white-space: nowrap;
}
.scroll-text {
position: relative;
z-index: 20;
width: 100vw;
height: var(--scroll-ratio);
overflow: hidden;
display: flex;
align-items: center;
background: var(--black);
color: var(--white);
}
.scroll-text__track {
display: flex;
width: max-content;
min-width: 200%;
animation: scrollText 23s linear infinite;
}
.scroll-text__track p {
flex: 0 0 auto;
margin: 0;
padding-right: 2.5em;
font-size: clamp(18px, 1.75vw, 34px);
font-weight: 950;
line-height: 1;
letter-spacing: .04em;
white-space: nowrap;
}
@keyframes scrollText {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (max-width: 1024px) {
body {
overflow: auto;
}
.hero-page {
min-height: 100svh;
height: 100svh;
}
.site-header {
padding: 18px 24px;
}
.site-header__logo {
width: 220px;
}
.site-header__nav {
gap: 22px;
font-size: 15px;
}
.hero-visual__copy {
left: 19vw;
font-size: clamp(34px, 5.5vw, 64px);
}
.hero-visual__piece-grid {
width: 48vw;
height: 48vw;
transform: translate(-36%, -50%);
}
.hero-visual__vertical-title {
font-size: clamp(44px, 7vw, 82px);
}
}
@media (max-width: 767px) {
:root {
--header-ratio: 14svh;
--visual-ratio: 81svh;
--scroll-ratio: 5svh;
}
.site-header__logo {
width: 205px;
}
.site-header__nav {
display: none;
}
.hero-visual__semicircle {
width: 118px;
height: 236px;
}
.hero-visual__copy {
left: 18px;
top: 35%;
font-size: 36px;
text-shadow: 0 1px 0 rgba(243, 234, 216, .25);
}
.hero-visual__piece-grid {
width: 76vw;
height: 76vw;
left: 58%;
top: 51%;
transform: translate(-50%, -50%);
opacity: .95;
}
.hero-visual__vertical-title {
right: 12px;
top: 50%;
font-size: 42px;
}
.scroll-text__track p {
font-size: 17px;
}
}
/* =========================================================
Revision 04
Layout structure fixed:
① site-header: 10vh
② hero-visual: 85vh
③ scroll-text: 5vh
========================================================= */
:root {
--header-ratio: 10vh;
--visual-ratio: 85vh;
--scroll-ratio: 5vh;
--hero-header-height: 10vh;
--hero-visual-height: 85vh;
--scroll-text-height: 5vh;
}
/* ページ全体を100vhに固定し、3領域を明確に分割 */
html,
body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
/* hero-page / wrapper が存在する場合はこちらで制御 */
.hero-page,
.hero-wrapper,
.hero-section {
width: 100%;
height: 100vh;
min-height: 100vh;
overflow: hidden;
display: grid;
grid-template-rows: var(--header-ratio) var(--visual-ratio) var(--scroll-ratio);
}
/* wrapperが存在せず、body直下にheader/visual/scrollが並ぶ場合の保険 */
body > .site-header,
body > header.site-header {
height: var(--header-ratio);
}
body > .hero-visual,
body > main > .hero-visual {
height: var(--visual-ratio);
}
body > .scroll-text,
body > main > .scroll-text {
height: var(--scroll-ratio);
}
/* header */
.site-header {
position: relative;
z-index: 50;
width: 100%;
height: var(--header-ratio);
min-height: 0;
padding-block: clamp(10px, 1.7vh, 18px);
box-sizing: border-box;
display: flex;
align-items: flex-end;
}
/* typo-logoとナビを下揃え */
.site-header__inner,
.site-header__nav,
.site-header nav,
.site-header__logo,
.site-header .logo,
.site-header .typo-logo {
box-sizing: border-box;
}
.site-header__inner {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.site-header__logo,
.site-header .logo,
.site-header .typo-logo {
display: flex;
align-items: flex-end;
}
.site-header__logo img,
.site-header .logo img,
.site-header img[src*="typo-logo"] {
display: block;
height: clamp(28px, 5.6vh, 58px);
width: auto;
}
.site-header__nav,
.site-header nav {
display: flex;
align-items: flex-end;
height: auto;
min-height: 0;
padding-bottom: 0;
margin-bottom: 0;
}
/* visual */
.hero-visual {
position: relative;
z-index: 1;
width: 100%;
height: var(--visual-ratio);
min-height: 0;
margin-top: 0;
overflow: hidden;
}
.hero-visual__inner {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
.hero-visual__slides,
.hero-visual__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
.hero-visual__slides img,
.hero-visual__slide img,
.hero-slide img,
.hero-visual__slides picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* scroll-text */
.scroll-text {
position: relative;
z-index: 60;
width: 100%;
height: var(--scroll-ratio);
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
background: #231916;
color: #f3ead8;
white-space: nowrap;
}
.scroll-text__track {
display: flex;
width: max-content;
animation: scrollTextLoop 24s linear infinite;
will-change: transform;
}
.scroll-text__track span {
display: inline-block;
padding-right: 2em;
font-size: clamp(13px, 2.2vh, 28px);
line-height: 1;
font-weight: 900;
letter-spacing: 0.06em;
}
@keyframes scrollTextLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* 既存指定のズレ対策 */
.hero-visual,
.hero-visual__inner,
.hero-visual__slides,
.hero-visual__slide {
top: auto;
bottom: auto;
}
/* symbol-logo position 継続 */
.hero-visual__symbol img,
.symbol-logo,
img[src*="symbol-logo"] {
transform: translateX(-20%);
}
/* piece grid 継続 */
.hero-visual__piece-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.hero-visual__piece-grid img,
.hero-visual__piece {
filter: brightness(0) saturate(100%) invert(93%) sepia(9%) saturate(525%) hue-rotate(347deg) brightness(103%) contrast(91%);
}
/* vertical title 継続 */
.hero-visual__vertical-title {
color: #231916;
height: 100%;
font-size: clamp(48px, 10.6vh, 128px);
line-height: 0.96;
display: flex;
align-items: center;
justify-content: center;
}
.hero-visual__vertical-title span,
.hero-visual__vertical-title p {
color: #231916;
font-size: inherit;
line-height: inherit;
}
/* ===== Revision 05 ===== */
/* 7% / 88% / 5% */
:root{
--header-ratio:7vh;
--visual-ratio:88vh;
--scroll-ratio:5vh;
}
/* フッターを強制表示 */
.scroll-text{
position:fixed !important;
left:0;
bottom:0;
width:100%;
height:5vh !important;
z-index:99999 !important;
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
/* hero がフッターを隠さない */
.hero-visual,
.hero-visual__inner,
.hero-visual__slides,
.hero-visual__slide{
height:88vh !important;
max-height:88vh !important;
overflow:hidden;
}
/* ヘッダー */
.site-header{
height:7vh !important;
min-height:48px !important;
}
/* ==================== ABOUT CSS ==================== */
/* ===== SOURCE: __MACOSX/briarfus_about_section_fixed10/assets/css/._about.css ===== */
Mac OS X 2
?ATTR?ccom.apple.lastuseddate#PSHcom.apple.macl4com.apple.provenanceD
jJ0:@\ݭKnfnHܝ5]XH
/* ===== SOURCE: briarfus_about_section_fixed10/assets/css/about.css ===== */
:root{--cream:#f3ead8;--orange:#de5536;--black:#231916;--blue:#5188a3;--green:#9ca95b;--yellow:#ec9f32}.about-section{width:100%;overflow:hidden;background:var(--cream);color:var(--black);font-family:"Helvetica Neue",Arial,"Hiragino Sans","Yu Gothic",sans-serif}.about-block{position:relative;width:100%}.about-block--intro{min-height:100vh;background:var(--cream)}.about-intro__stage{position:relative;width:min(100%,1440px);min-height:100vh;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(24px,7vw,108px) 0}.about-reveal{opacity:0;transform:translateY(80px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}.about-reveal.is-visible{opacity:1;transform:translateY(0)}.about-intro__title{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,16px);font-size:clamp(76px,15vw,210px);line-height:.78;font-weight:950;letter-spacing:-.085em;color:var(--black)}.about-intro__title-symbol{display:inline-grid;place-items:center;width:.82em;height:.82em;margin-inline:-.06em;transform:translateY(.02em)}.about-intro__title-symbol img{display:block;width:100%;height:100%;object-fit:contain}.about-intro__copy{position:relative;z-index:3;margin:clamp(28px,3.4vw,48px) auto 0;text-align:center;font-size:clamp(15px,1.5vw,22px);line-height:2.15;font-weight:900}.about-intro__copy p{margin:0}.about-intro__pieces{pointer-events:none;position:absolute;inset:0;z-index:1}.about-piece{position:absolute;width:clamp(34px,5.4vw,82px);height:auto;object-fit:contain;animation:aboutPieceFloat 7s ease-in-out infinite alternate}.about-piece--1{left:9%;top:8%;animation-delay:0s}.about-piece--2{left:6%;top:23%;animation-delay:-.8s}.about-piece--3{left:16%;top:39%;animation-delay:-1.4s}.about-piece--4{left:7%;top:58%;animation-delay:-2.1s}.about-piece--5{left:18%;top:74%;animation-delay:-2.9s}.about-piece--6{right:9%;top:8%;animation-delay:-.4s}.about-piece--7{right:6%;top:24%;animation-delay:-1.1s}.about-piece--8{right:15%;top:41%;animation-delay:-1.8s}.about-piece--9{right:7%;top:58%;animation-delay:-2.5s}.about-piece--10{right:16%;top:74%;animation-delay:-3.2s}@keyframes aboutPieceFloat{0%{transform:translate3d(0,0,0) rotate(-2deg)}100%{transform:translate3d(0,-16px,0) rotate(3deg)}}.about-staff-list{position:relative;z-index:3;list-style:none;margin:clamp(34px,4.8vw,70px) auto 0;padding:0;display:flex;justify-content:center;gap:clamp(42px,8vw,132px)}.about-staff-card{width:clamp(150px,18vw,240px);text-align:center}.about-staff-card img{display:block;width:100%;height:auto;margin:0 auto}.about-staff-card p{margin:10px 0 0;font-family:"Brush Script MT","Segoe Script",cursive;font-size:clamp(22px,2.2vw,36px);line-height:1;color:var(--black)}.about-intro__big-logo{position:absolute;left:50%;bottom:-2.5vw;z-index:2;width:110vw;transform:translate(-50%,80px) rotate(5deg);text-align:center;color:var(--orange);transform-origin:center bottom}.about-intro__big-logo.is-visible{transform:translate(-50%,0) rotate(5deg)}.about-intro__big-logo span{display:block;margin-bottom:-.22em;font-size:clamp(32px,5vw,78px);line-height:1;font-weight:950;letter-spacing:.04em}.about-intro__big-logo strong{display:block;font-size:clamp(94px,17vw,260px);line-height:.78;font-weight:950;letter-spacing:-.08em}.about-block--business{min-height:100vh;background:var(--orange);color:var(--cream);isolation:isolate}.business-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.business-bg__parts{position:absolute;left:0;bottom:0;width:min(58vw,840px);height:auto;opacity:.95}.business-copy{position:relative;z-index:3;padding-top:clamp(48px,6vw,90px);text-align:center;color:var(--cream);font-size:clamp(34px,5.2vw,80px);line-height:1.35;font-weight:950}.business-copy p{margin:0}.business-copy strong{font-size:1.18em}.business-layout{position:relative;z-index:2;width:min(100%,1440px);margin:clamp(36px,4vw,60px) auto 0;padding:0 clamp(24px,6vw,96px) clamp(60px,7vw,100px);display:grid;grid-template-columns:minmax(360px,45%) 1fr;gap:clamp(36px,5vw,72px);align-items:center}.business-visual{position:relative;width:min(100%,560px);aspect-ratio:1/1.18;transform:translateX(-115%);opacity:0;transition:transform 1.15s cubic-bezier(.22,1,.36,1),opacity .9s cubic-bezier(.22,1,.36,1)}.business-visual.is-visible{transform:translateX(0);opacity:1}.business-visual__frame{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,100% 50%,0 100%);z-index:2;background:var(--black)}.business-visual__slides{width:100%;height:100%;position:relative}.business-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.2s ease}.business-slide.is-active{opacity:1;transform:scale(1)}.business-visual__border{position:absolute;inset:0;clip-path:polygon(0 0,100% 50%,0 100%);pointer-events:none}.business-visual__border--blue{z-index:1;transform:translate(26px,0) scale(1.035);background:var(--blue)}.business-visual__border--green{z-index:0;transform:translate(52px,0) scale(1.07);background:var(--green)}.business-visual__border--yellow{z-index:-1;transform:translate(78px,0) scale(1.105);background:var(--yellow)}.business-icon{position:absolute;z-index:5;width:clamp(42px,4.8vw,72px);height:auto;opacity:0;transform:translateY(16px) scale(.94);transition:opacity .5s ease,transform .5s ease}.business-visual.is-visible .business-icon{opacity:1;transform:translateY(0) scale(1)}.business-icon--1{left:13%;top:7%;transition-delay:.25s}.business-icon--2{left:24%;top:22%;transition-delay:.35s}.business-icon--3{left:38%;top:36%;transition-delay:.45s}.business-icon--4{left:49%;top:51%;transition-delay:.55s}.business-icon--5{left:38%;top:66%;transition-delay:.65s}.business-icon--6{left:20%;top:81%;transition-delay:.75s}.business-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3.1vw,42px)}.business-item{display:grid;grid-template-columns:minmax(120px,32%) 1fr;align-items:center;gap:20px;cursor:pointer}.business-item__line{display:block;height:3px;background:var(--cream);position:relative;transform:scaleX(0);transform-origin:left;transition:transform .72s cubic-bezier(.22,1,.36,1)}.business-item__line::after{content:"";position:absolute;right:-4px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--cream);transform:translateY(-50%) scale(0);transition:transform .28s ease .56s}.business-item.is-visible .business-item__line{transform:scaleX(1)}.business-item.is-visible .business-item__line::after{transform:translateY(-50%) scale(1)}.business-item__text{border:0;padding:0;background:transparent;color:var(--cream);text-align:left;cursor:pointer;opacity:0;transform:translateY(16px);transition:opacity .45s ease .62s,transform .45s ease .62s}.business-item.is-visible .business-item__text{opacity:1;transform:translateY(0)}.business-item__text span{display:block;margin-bottom:4px;font-size:clamp(13px,1.25vw,19px);line-height:1;font-weight:950;letter-spacing:.08em}.business-item__text strong{display:block;font-size:clamp(19px,2.2vw,34px);line-height:1.35;font-weight:950}.business-item:hover .business-item__text,.business-item.is-active .business-item__text{transform:translateX(10px)}@media(max-width:900px){.about-intro__stage{padding-inline:22px}.about-intro__title{font-size:clamp(58px,19vw,110px)}.about-intro__copy{font-size:clamp(14px,3.6vw,15px)}.about-staff-list{gap:28px}.about-staff-card{width:min(38vw,170px)}.about-intro__big-logo{bottom:8vw}.about-intro__big-logo strong{font-size:clamp(72px,22vw,140px)}.business-layout{grid-template-columns:1fr;padding-inline:22px}.business-visual{width:min(82vw,420px);margin-inline:auto}.business-item{grid-template-columns:88px 1fr}.business-copy{font-size:clamp(28px,9vw,52px)}}
/* =========================================================
ABOUT Revision 01
========================================================= */
/* 旧big-logoは無効化 */
.about-intro__big-logo {
display: none !important;
}
/* about-parts.pngを横幅100%で表示 */
.about-intro__parts {
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
width: 100%;
transform: translate(-50%, 80px);
pointer-events: none;
transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.about-intro__parts.is-visible {
transform: translate(-50%, 0);
}
.about-intro__parts img {
display: block;
width: 100%;
height: auto;
}
/* ABOUTタイトル内symbol-logoの水平中心を調整 */
.about-intro__title {
align-items: center;
}
.about-intro__title > span:not(.about-intro__title-symbol) {
display: inline-flex;
align-items: center;
height: .82em;
}
.about-intro__title-symbol {
align-self: center;
transform: translateY(0);
line-height: 1;
}
/* piece画像を50%拡大 */
.about-piece {
width: clamp(51px, 8.1vw, 123px);
}
/* Bブロックははみ出しを非表示 */
.about-block--business {
overflow: hidden;
}
/* strong以外：塗り#de5536、外側線#f3ead8 */
.business-copy span {
color: #de5536;
-webkit-text-stroke: clamp(1.5px, .18vw, 3px) #f3ead8;
paint-order: stroke fill;
}
.business-copy strong {
color: #f3ead8;
-webkit-text-stroke: 0;
}
/* business-visualを縦いっぱいに近づけて拡大 */
.business-layout {
position: relative;
min-height: calc(100vh - clamp(120px, 15vw, 210px));
grid-template-columns: minmax(520px, 52%) 1fr;
overflow: visible;
}
.business-visual {
position: relative;
align-self: stretch;
width: min(72vw, 820px);
height: calc(100vh - clamp(112px, 12vw, 180px));
min-height: 720px;
aspect-ratio: auto;
transform: translateX(-135%);
transition-duration: 1.8s;
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
z-index: 2;
}
.business-visual.is-visible {
transform: translateX(0);
}
.business-visual__frame,
.business-visual__border {
top: 0;
bottom: 0;
left: 0;
right: auto;
width: 100%;
height: 100%;
}
.business-visual__border--blue {
transform: translate(34px, 0) scale(1.035);
}
.business-visual__border--green {
transform: translate(68px, 0) scale(1.07);
}
.business-visual__border--yellow {
transform: translate(102px, 0) scale(1.105);
}
/* Business01〜06.pngを三角形アウトライン上に均等配置 */
.business-icon {
width: clamp(54px, 5.2vw, 96px);
z-index: 8;
}
.business-icon--1 { left: 4%; top: 4%; transition-delay: .25s; }
.business-icon--2 { left: 22%; top: 22%; transition-delay: .35s; }
.business-icon--3 { left: 40%; top: 40%; transition-delay: .45s; }
.business-icon--4 { left: 40%; top: 54%; transition-delay: .55s; }
.business-icon--5 { left: 22%; top: 72%; transition-delay: .65s; }
.business-icon--6 { left: 4%; top: 90%; transition-delay: .75s; }
/* 線をvisual群より上に重ねる */
.business-list {
position: relative;
z-index: 9;
align-self: center;
gap: clamp(28px, 3.4vw, 48px);
}
.business-item {
position: relative;
display: grid;
grid-template-columns: clamp(180px, 18vw, 300px) 1fr;
gap: clamp(18px, 2.4vw, 34px);
}
.business-item__line {
position: relative;
z-index: 12;
height: 3px;
width: 100%;
background: #f3ead8;
}
.business-item__line::after {
width: 12px;
height: 12px;
right: auto;
left: -6px;
}
.business-item__text {
position: relative;
z-index: 13;
}
/* SP/TB仮対応 */
@media (max-width: 900px) {
.about-intro__parts {
position: relative;
left: auto;
bottom: auto;
width: 100%;
transform: translateY(40px);
margin-top: 32px;
}
.about-intro__parts.is-visible {
transform: translateY(0);
}
.business-layout {
min-height: auto;
grid-template-columns: 1fr;
}
.business-visual {
width: min(92vw, 520px);
height: auto;
min-height: 0;
aspect-ratio: 1 / 1.18;
}
.business-item {
grid-template-columns: 90px 1fr;
}
}
/* =========================================================
ABOUT Revision 02
- about-parts新データ差し替え + 100vw
- business-visual 150%拡大
- business-item line/text調整
- business-layout表示安定化
========================================================= */
/* Aブロック下部のabout-parts */
.about-block--intro {
position: relative;
overflow: hidden;
min-height: 100vh;
padding-bottom: clamp(170px, 18vw, 330px);
}
.about-intro__stage {
position: relative;
z-index: 1;
min-height: 100vh;
padding-bottom: clamp(170px, 18vw, 330px);
}
.about-intro__parts {
position: absolute;
left: 50%;
bottom: 0;
z-index: 0;
width: 100vw;
max-width: none;
transform: translate(-50%, 80px);
pointer-events: none;
transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.about-intro__parts.is-visible {
transform: translate(-50%, 0);
}
.about-intro__parts img {
display: block;
width: 100vw;
max-width: none;
height: auto;
}
/* A内の他要素をabout-partsより前面へ */
.about-intro__title,
.about-intro__copy,
.about-intro__pieces,
.about-staff-list {
position: relative;
z-index: 3;
}
/* Bブロック全体 */
.about-block--business {
position: relative;
overflow: hidden;
min-height: 100vh;
}
/* business-layoutがリロード時に消えないように明示 */
.business-layout {
position: relative;
z-index: 4;
display: grid;
visibility: visible;
opacity: 1;
min-height: 100vh;
grid-template-columns: minmax(720px, 62%) minmax(520px, 1fr);
align-items: center;
gap: clamp(24px, 3vw, 54px);
margin-top: 0;
padding-top: clamp(28px, 3vw, 54px);
padding-bottom: clamp(42px, 5vw, 90px);
overflow: visible;
}
/* business-visual 50%拡大 */
.business-visual {
width: min(108vw, 1230px);
height: calc((100vh - clamp(112px, 12vw, 180px)) * 1.5);
min-height: 1080px;
max-height: none;
aspect-ratio: auto;
align-self: center;
justify-self: start;
transform: translateX(-150%);
opacity: 1;
transition-duration: 2.2s;
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
z-index: 2;
}
.business-visual.is-visible {
transform: translateX(0);
opacity: 1;
}
.business-visual__frame,
.business-visual__border {
width: 100%;
height: 100%;
}
/* 拡大に合わせて境界線オフセットも1.5倍 */
.business-visual__border--blue {
transform: translate(51px, 0) scale(1.035);
}
.business-visual__border--green {
transform: translate(102px, 0) scale(1.07);
}
.business-visual__border--yellow {
transform: translate(153px, 0) scale(1.105);
}
/* Businessアイコンは次回調整前提：現状維持寄り */
.business-icon {
z-index: 10;
}
/* business-item: テキストを1行化しやすく */
.business-list {
position: relative;
z-index: 20;
width: 100%;
min-width: 520px;
gap: clamp(24px, 2.7vw, 42px);
}
.business-item {
position: relative;
display: grid;
grid-template-columns: minmax(260px, 32vw) minmax(420px, max-content);
gap: clamp(18px, 2vw, 30px);
align-items: center;
width: 100%;
}
/* 線：右端の丸に戻す */
.business-item__line {
position: relative;
z-index: 24;
width: 100%;
height: 3px;
background: #f3ead8;
transform-origin: left;
}
/* 丸を線の右端へ */
.business-item__line::after {
left: auto;
right: -6px;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-50%) scale(0);
}
.business-item.is-visible .business-item__line::after {
transform: translateY(-50%) scale(1);
}
.business-item__text {
position: relative;
z-index: 25;
width: max-content;
min-width: max-content;
white-space: nowrap;
}
.business-item__text strong {
white-space: nowrap;
display: block;
font-size: clamp(18px, 1.8vw, 30px);
}
/* visualとlineの重なりを作るため、listを少し左へ寄せる */
.business-list {
margin-left: clamp(-220px, -13vw, -120px);
}
/* SP/TB仮調整 */
@media (max-width: 1200px) {
.business-layout {
grid-template-columns: minmax(560px, 58%) minmax(420px, 1fr);
}
.business-visual {
width: min(98vw, 940px);
min-height: 900px;
}
.business-list {
margin-left: clamp(-160px, -10vw, -80px);
min-width: 420px;
}
.business-item {
grid-template-columns: minmax(200px, 28vw) minmax(360px, max-content);
}
}
@media (max-width: 900px) {
.about-block--intro,
.about-intro__stage {
padding-bottom: clamp(100px, 28vw, 180px);
}
.about-intro__parts {
position: absolute;
left: 50%;
bottom: 0;
width: 100vw;
transform: translate(-50%, 40px);
}
.about-intro__parts.is-visible {
transform: translate(-50%, 0);
}
.about-intro__parts img {
width: 100vw;
}
.business-layout {
grid-template-columns: 1fr;
min-height: auto;
overflow: hidden;
}
.business-visual {
width: min(120vw, 680px);
height: auto;
min-height: 0;
aspect-ratio: 1 / 1.18;
transform: translateX(-120%);
}
.business-list {
margin-left: 0;
min-width: 0;
}
.business-item {
grid-template-columns: 90px 1fr;
}
.business-item__text,
.business-item__text strong {
width: auto;
min-width: 0;
white-space: normal;
}
}
/* =========================================================
ABOUT Revision 03
モック優先の構造整理
- piece群を再分散
- about-partsとB背景の隙間除去
- business-layout / business-visualの表示安定化
========================================================= */
/* Aブロック：下部パーツとの接続を安定化 */
.about-block--intro {
position: relative;
overflow: hidden;
min-height: 110vh;
background: #f3ead8;
padding-bottom: 0 !important;
}
.about-intro__stage {
position: relative;
z-index: 1;
min-height: 100vh;
padding-bottom: clamp(210px, 20vw, 360px) !important;
box-sizing: border-box;
}
/* ここが固まり表示の主因になりやすいので、absoluteへ戻す */
.about-intro__pieces {
pointer-events: none !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
}
/* piece群：モックに近い左右分散へ再配置 */
.about-piece {
position: absolute !important;
width: clamp(52px, 7.6vw, 118px) !important;
height: auto !important;
object-fit: contain !important;
opacity: 1 !important;
transform-origin: center center;
animation: aboutPieceFloat 7s ease-in-out infinite alternate;
}
.about-piece--1 { left: 7.5% !important; top: 7.5% !important; animation-delay: 0s; }
.about-piece--2 { left: 4.5% !important; top: 22.5% !important; animation-delay: -.8s; }
.about-piece--3 { left: 13.5% !important; top: 37.5% !important; animation-delay: -1.6s; }
.about-piece--4 { left: 5.5% !important; top: 56.5% !important; animation-delay: -2.4s; }
.about-piece--5 { left: 15.5% !important; top: 72.5% !important; animation-delay: -3.2s; }
.about-piece--6 { right: 7.5% !important; top: 7.5% !important; animation-delay: -.4s; }
.about-piece--7 { right: 4.5% !important; top: 22.5% !important; animation-delay: -1.2s; }
.about-piece--8 { right: 13.5% !important; top: 39.5% !important; animation-delay: -2.0s; }
.about-piece--9 { right: 5.5% !important; top: 56.5% !important; animation-delay: -2.8s; }
.about-piece--10 { right: 15.5% !important; top: 72.5% !important; animation-delay: -3.6s; }
.about-intro__title,
.about-intro__copy,
.about-staff-list {
position: relative;
z-index: 5 !important;
}
/* about-parts：100vw、Bブロックに隙間なく接続 */
.about-intro__parts {
position: absolute !important;
left: 50% !important;
bottom: -1px !important;
z-index: 3 !important;
width: 100vw !important;
max-width: none !important;
transform: translate(-50%, 80px);
pointer-events: none;
}
.about-intro__parts.is-visible {
transform: translate(-50%, 0);
}
.about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
}
/* Bブロック：Aのabout-partsと同色で隙間を消す */
.about-block--business {
position: relative !important;
margin-top: -1px !important;
padding-top: 0 !important;
overflow: hidden !important;
min-height: 100vh !important;
background: #de5536 !important;
color: #f3ead8;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* B背景パーツは控えめに。表示干渉しないようpointer-events無効 */
.business-bg {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.business-bg__parts {
display: none !important;
}
/* Bのコピー */
.business-copy {
position: relative !important;
z-index: 5 !important;
padding-top: clamp(48px, 6vw, 88px) !important;
margin-bottom: clamp(24px, 3vw, 48px) !important;
}
/* business-layout：表示されなくなる指定を排除 */
.business-layout {
position: relative !important;
z-index: 4 !important;
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
width: min(100%, 1440px) !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 0 clamp(24px, 5vw, 84px) clamp(60px, 7vw, 100px) !important;
grid-template-columns: minmax(520px, 50%) minmax(560px, 1fr) !important;
gap: clamp(20px, 3vw, 50px) !important;
align-items: center !important;
overflow: visible !important;
}
/* business-visual：まず確実に画面内に出す。アニメーションはJSでB表示時に付与 */
.business-visual {
position: relative !important;
z-index: 3 !important;
width: min(78vw, 940px) !important;
height: min(88vh, 1040px) !important;
min-height: 780px !important;
aspect-ratio: auto !important;
justify-self: start !important;
align-self: center !important;
opacity: 1 !important;
transform: translateX(-115%) !important;
transition: transform 2s cubic-bezier(.16,1,.3,1), opacity .8s ease !important;
}
.about-block--business.is-visible .business-visual,
.business-visual.is-visible {
transform: translateX(0) !important;
opacity: 1 !important;
}
.business-visual__frame,
.business-visual__border {
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}
.business-visual__frame {
z-index: 3 !important;
overflow: hidden !important;
background: #231916;
}
.business-visual__border--blue {
z-index: 2 !important;
transform: translate(42px, 0) scale(1.035) !important;
background: #5188a3 !important;
}
.business-visual__border--green {
z-index: 1 !important;
transform: translate(84px, 0) scale(1.07) !important;
background: #9ca95b !important;
}
.business-visual__border--yellow {
z-index: 0 !important;
transform: translate(126px, 0) scale(1.105) !important;
background: #ec9f32 !important;
}
.business-slide {
display: block !important;
}
/* テキストリストも常時表示対象に戻す */
.business-list {
position: relative !important;
z-index: 20 !important;
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
width: 100% !important;
margin-left: clamp(-160px, -10vw, -90px) !important;
gap: clamp(24px, 3vw, 42px) !important;
}
.business-item {
display: grid !important;
grid-template-columns: minmax(220px, 26vw) minmax(460px, max-content) !important;
gap: clamp(18px, 2vw, 30px) !important;
align-items: center !important;
visibility: visible !important;
}
.business-item__line {
z-index: 22 !important;
}
.business-item__line::after {
left: auto !important;
right: -6px !important;
top: 50% !important;
}
.business-item__text {
width: max-content !important;
min-width: max-content !important;
white-space: nowrap !important;
}
.business-item__text strong {
white-space: nowrap !important;
}
/* SP/TBは後工程用に最低限 */
@media (max-width: 900px) {
.about-intro__stage {
padding-bottom: clamp(120px, 32vw, 220px) !important;
}
.business-layout {
grid-template-columns: 1fr !important;
padding-inline: 22px !important;
}
.business-visual {
width: min(110vw, 620px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1 / 1.18 !important;
}
.business-list {
margin-left: 0 !important;
}
.business-item {
grid-template-columns: 90px 1fr !important;
}
.business-item__text,
.business-item__text strong {
width: auto !important;
min-width: 0 !important;
white-space: normal !important;
}
}
/* =========================================================
ABOUT Revision 04
モック優先でA/Bブロックを再安定化
========================================================= */
.about-block--intro {
position: relative !important;
overflow: hidden !important;
min-height: 100vh !important;
background: #f3ead8 !important;
}
.about-intro__stage {
position: relative !important;
width: min(100%, 1440px) !important;
min-height: 100vh !important;
margin: 0 auto !important;
padding: clamp(28px, 4.5vw, 64px) clamp(24px, 7vw, 108px) clamp(180px, 16vw, 300px) !important;
box-sizing: border-box !important;
}
.about-intro__parts {
position: absolute !important;
left: 50% !important;
bottom: -35px !important;
z-index: 2 !important;
width: 100vw !important;
max-width: none !important;
transform: translate(-50%, 80px);
pointer-events: none !important;
transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.about-intro__parts.is-visible {
transform: translate(-50%, 0);
}
.about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
}
.about-intro__title {
position: relative !important;
z-index: 6 !important;
align-items: center !important;
}
.about-intro__title > span:not(.about-intro__title-symbol) {
display: inline-flex !important;
align-items: center !important;
height: .82em !important;
}
.about-intro__title-symbol {
align-self: center !important;
transform: translateY(0) !important;
line-height: 1 !important;
}
.about-intro__copy {
position: relative !important;
z-index: 6 !important;
margin: clamp(20px, 2.8vw, 40px) auto 0 !important;
}
.about-staff-list {
position: relative !important;
z-index: 6 !important;
margin: clamp(18px, 2.8vw, 42px) auto 0 !important;
padding: 0 !important;
}
.about-intro__pieces {
pointer-events: none !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: min(68vh, 760px) !important;
z-index: 3 !important;
overflow: visible !important;
}
.about-piece {
position: absolute !important;
width: clamp(48px, 7.2vw, 112px) !important;
height: auto !important;
object-fit: contain !important;
opacity: 1 !important;
animation: aboutPieceFloat 7s ease-in-out infinite alternate;
}
.about-piece--1 { left: 6.5% !important; top: 5% !important; animation-delay: 0s; }
.about-piece--2 { left: 3.8% !important; top: 22% !important; animation-delay: -.8s; }
.about-piece--3 { left: 14.5% !important; top: 39% !important; animation-delay: -1.6s; }
.about-piece--4 { left: 4.8% !important; top: 55% !important; animation-delay: -2.4s; }
.about-piece--5 { left: 16.5% !important; top: 68% !important; animation-delay: -3.2s; }
.about-piece--6 { right: 6.5% !important; top: 5% !important; animation-delay: -.4s; }
.about-piece--7 { right: 3.8% !important; top: 22% !important; animation-delay: -1.2s; }
.about-piece--8 { right: 14.5% !important; top: 39% !important; animation-delay: -2.0s; }
.about-piece--9 { right: 4.8% !important; top: 55% !important; animation-delay: -2.8s; }
.about-piece--10 { right: 16.5% !important; top: 68% !important; animation-delay: -3.6s; }
.about-block--business {
position: relative !important;
margin-top: -1px !important;
padding-top: 0 !important;
overflow: hidden !important;
min-height: 100vh !important;
background: #de5536 !important;
color: #f3ead8 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.business-bg__parts {
display: none !important;
}
.business-copy {
position: relative !important;
z-index: 10 !important;
padding-top: clamp(46px, 5.4vw, 88px) !important;
margin-bottom: clamp(20px, 2.2vw, 36px) !important;
}
.business-copy span {
color: #de5536 !important;
-webkit-text-stroke: clamp(3.5px, .18vw, 3px) #f3ead8 !important;
paint-order: stroke fill !important;
}
.business-copy strong {
color: #f3ead8 !important;
-webkit-text-stroke: 0 !important;
}
.business-layout {
position: relative !important;
z-index: 5 !important;
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
width: min(100%, 1800px) !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 0 clamp(22px, 4.8vw, 88px) clamp(58px, 7vw, 110px) !important;
grid-template-columns: minmax(650px, 56%) minmax(620px, 1fr) !important;
gap: clamp(16px, 2.6vw, 44px) !important;
align-items: center !important;
overflow: visible !important;
}
.business-visual {
position: relative !important;
z-index: 3 !important;
width: min(93.6vw, 1128px) !important;
height: min(105.6vh, 1248px) !important;
min-height: 936px !important;
aspect-ratio: auto !important;
justify-self: start !important;
align-self: center !important;
opacity: 1 !important;
transform: translateX(-120%) !important;
transition: transform 2s cubic-bezier(.16,1,.3,1), opacity .8s ease !important;
}
.about-block--business.is-visible .business-visual,
.business-visual.is-visible {
transform: translateX(0) !important;
opacity: 1 !important;
}
.business-visual__frame {
position: absolute !important;
left: 0 !important;
top: 50% !important;
width: 100% !important;
height: 100% !important;
transform: translateY(-50%) !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
z-index: 4 !important;
overflow: hidden !important;
background: #231916 !important;
}
.business-visual__border {
position: absolute !important;
left: 0 !important;
top: 50% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
pointer-events: none !important;
}
.business-visual__border--blue {
width: 115% !important;
height: 115% !important;
transform: translateY(-50%) !important;
background: #5188a3 !important;
z-index: 3 !important;
}
.business-visual__border--green {
width: 130% !important;
height: 130% !important;
transform: translateY(-50%) !important;
background: #9ca95b !important;
z-index: 2 !important;
}
.business-visual__border--yellow {
width: 145% !important;
height: 145% !important;
transform: translateY(-50%) !important;
background: #ec9f32 !important;
z-index: 1 !important;
}
.business-icon {
position: absolute !important;
z-index: 12 !important;
width: clamp(58px, 5.6vw, 104px) !important;
left: 42% !important;
transform: translate(-50%, -50%) !important;
}
.business-icon--1 { top: 13% !important; }
.business-icon--2 { top: 27% !important; }
.business-icon--3 { top: 41% !important; }
.business-icon--4 { top: 55% !important; }
.business-icon--5 { top: 69% !important; }
.business-icon--6 { top: 83% !important; }
.business-list {
position: relative !important;
z-index: 20 !important;
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin-left: clamp(-170px, -9vw, -90px) !important;
gap: clamp(22px, 2.7vw, 42px) !important;
}
.business-item {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(240px, 26vw) minmax(520px, max-content) !important;
gap: clamp(18px, 2vw, 30px) !important;
align-items: center !important;
visibility: visible !important;
}
.business-item__line {
position: relative !important;
z-index: 22 !important;
height: 3px !important;
width: 100% !important;
background: #f3ead8 !important;
transform-origin: left !important;
}
.business-item__line::after {
content: "" !important;
position: absolute !important;
left: auto !important;
right: -6px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: #f3ead8 !important;
transform: translateY(-50%) scale(0) !important;
}
.business-item.is-visible .business-item__line::after {
transform: translateY(-50%) scale(1) !important;
}
.business-item__text {
position: relative !important;
z-index: 23 !important;
width: max-content !important;
min-width: max-content !important;
white-space: nowrap !important;
}
.business-item__text strong {
white-space: nowrap !important;
font-size: clamp(18px, 2.8vw, 40px) !important;
}
@media (max-width: 1200px) {
.business-layout {
grid-template-columns: minmax(520px, 55%) minmax(460px, 1fr) !important;
}
.business-visual {
width: min(100vw, 960px) !important;
height: min(96vh, 1050px) !important;
min-height: 780px !important;
}
.business-list {
margin-left: clamp(-130px, -8vw, -70px) !important;
}
.business-item {
grid-template-columns: minmax(190px, 24vw) minmax(420px, max-content) !important;
}
}
@media (max-width: 900px) {
.about-intro__stage {
padding-bottom: clamp(120px, 30vw, 220px) !important;
}
.about-intro__pieces {
height: min(58vh, 520px) !important;
}
.about-piece {
width: clamp(38px, 11vw, 74px) !important;
}
.business-layout {
grid-template-columns: 1fr !important;
padding-inline: 22px !important;
overflow: hidden !important;
}
.business-visual {
width: min(112vw, 680px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1 / 1.18 !important;
transform: translateX(-110%) !important;
}
.business-list {
margin: 0 0 50px 0 !important;
}
.business-item {
grid-template-columns: 90px 1fr !important;
}
.business-item__text,
.business-item__text strong {
width: auto !important;
min-width: 0 !important;
white-space: normal !important;
}
.business-item__text strong {
font-size: clamp(18px, 6vw, 30px) !important;
}
}
/* ===== REV05 PATCH ===== */
/* symbol logo */
.about-intro__title-symbol{
transform:translateY(-20%) !important;
}
/* visual left aligned after animation */
.business-layout{
width:min(100%,1800px) !important;
justify-items:start !important;
gap:clamp(22px,16vw,80px) !important;
}
.business-visual{
justify-self:start !important;
margin-left:0 !important;
}
/* border resize */
.business-visual__border--blue{
width:92% !important;
height:92% !important;
}
.business-visual__border--green{
width:104% !important;
height:104% !important;
}
.business-visual__border--yellow{
width:116% !important;
height:116% !important;
}
/* line longer */
.business-item{
grid-template-columns:minmax(480px,52vw) minmax(520px,max-content) !important;
transition:transform .12s ease !important;
transform-origin:left center !important;
}
.business-item:hover{
transform:scale(1.3) !important;
}
.business-item__text strong{
font-size:clamp(18px,2.8vw,40px) !important;
}
.business-item__line{
width:200% !important;
}
/* icon beside line */
.business-icon{
left:auto !important;
transform:translate(-50%,-50%) !important;
}
/* ===== REV06 PATCH ===== */
/* symbol logo 5% down */
.about-intro__title-symbol{
transform:translateY(-15%) !important;
}
/* visual left edge to viewport */
.business-visual.is-visible,
.about-block--business.is-visible .business-visual{
margin-left:calc(-1 * max(0px, (100vw - 1800px)/2)) !important;
}
/* border back to previous larger spec */
.business-visual__border--blue{
width:115% !important;
height:115% !important;
}
.business-visual__border--green{
width:130% !important;
height:130% !important;
}
.business-visual__border--yellow{
width:145% !important;
height:145% !important;
}
/* line half of rev05 */
.business-item__line{
width:100% !important;
}
/* hover distance half */
.business-item{
transition:transform .12s ease !important;
}
.business-item:hover{
transform:scale(1.15) !important;
}
/* ===== REV07 PATCH ===== */
/* symbol-logo: height remains, move 5% right */
.about-intro__title-symbol {
transform: translate(5%, -15%) !important;
}
/* old business-icon in visual is fully disabled */
.business-visual > .business-icon,
.business-visual .business-icon {
display: none !important;
}
/* business-item structure: icon / line / text */
.business-item {
grid-template-columns:
clamp(56px, 5.5vw, 96px)
minmax(180px, 22vw)
minmax(520px, max-content) !important;
gap: clamp(12px, 1.6vw, 24px) !important;
align-items: center !important;
transform-origin: left center !important;
}
/* icon placed directly at the left side of line */
.business-item__icon {
display: block !important;
width: clamp(46px, 4.8vw, 82px) !important;
height: auto !important;
justify-self: center !important;
align-self: center !important;
position: relative !important;
z-index: 24 !important;
pointer-events: none !important;
}
/* line now follows icon */
.business-item__line {
grid-column: 2 !important;
width: 100% !important;
min-width: 0 !important;
}
/* text follows line */
.business-item__text {
grid-column: 3 !important;
}
/* hover scale remains stable from icon/line origin */
.business-item:hover {
transform: scale(1.15) !important;
}
/* remove JS-positioned icon side effects */
.business-icon {
display: none !important;
}
@media (max-width: 900px) {
.business-item {
grid-template-columns: 56px 80px 1fr !important;
}
.business-item__icon {
width: 44px !important;
}
.business-item__text {
width: auto !important;
min-width: 0 !important;
white-space: normal !important;
}
}
/* ===== REV08 PATCH ===== */
/* business-layoutを少し上へ */
.business-layout {
transform: translateY(clamp(-120px, -6vw, -56px)) !important;
}
/* Bブロック下側の余白を上移動分だけ補正 */
.about-block--business {
padding-bottom: clamp(40px, 5vw, 90px) !important;
}
/* border群を比率維持で全体縮小
rev07: 115 / 130 / 145
rev08: 108 / 122 / 136
*/
.business-visual__border--blue {
width: 108% !important;
height: 108% !important;
}
.business-visual__border--green {
width: 122% !important;
height: 122% !important;
}
.business-visual__border--yellow {
width: 136% !important;
height: 136% !important;
}
@media (max-width: 900px) {
.business-layout {
transform: translateY(0) !important;
}
}
/* ===== REV09 PATCH ===== */
/* border群の見え幅を均一化 */
.business-visual__border--blue {
width: 108% !important;
height: 108% !important;
}
.business-visual__border--green {
width: 116% !important;
height: 116% !important;
}
.business-visual__border--yellow {
width: 124% !important;
height: 124% !important;
}
/* business-bgをbusiness-layoutの下辺より下へ出さない */
.business-bg {
top: 0 !important;
bottom: auto !important;
height: calc(100% - clamp(58px, 7vw, 110px)) !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* business-layoutの下余白を削除 */
.business-layout {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Bブロック下余白も削除 */
.about-block--business {
padding-bottom: 0 !important;
}
/* ==================== PORTFOLIO CSS ==================== */
/* ===== SOURCE: briarfus_portfolio_section_rev08/assets/css/portfolio.css ===== */
:root {
--cream: #f3ead8;
--orange: #de5536;
--black: #231916;
--bg: #ec9f32;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--black);
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
.portfolio-section {
position: relative;
overflow: hidden;
min-height: 100vh;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 24%),
linear-gradient(180deg, #efa22d 0%, #e88f16 100%);
padding: clamp(22px, 2.5vw, 42px) clamp(28px, 4vw, 72px) clamp(34px, 3.5vw, 58px);
}
.portfolio-section::before {
content: "";
position: absolute;
inset: 0;
opacity: .1;
pointer-events: none;
background-image: radial-gradient(rgba(35,25,22,.25) .8px, transparent .8px);
background-size: 4px 4px;
mix-blend-mode: multiply;
}
.portfolio-section__inner {
position: relative;
z-index: 1;
width: min(100%, 1720px);
margin: 0 auto;
}
.portfolio-header {
text-align: center;
margin-bottom: clamp(14px, 1.8vw, 28px);
}
.portfolio-header__title {
margin: 0;
color: var(--cream);
font-size: clamp(96px, 12vw, 245px);
line-height: .72;
letter-spacing: -.06em;
font-weight: 950;
}
.portfolio-layout {
display: grid;
grid-template-columns: minmax(0, 55fr) minmax(380px, 45fr);
gap: clamp(28px, 4vw, 68px);
align-items: start;
}
.portfolio-main {
min-width: 0;
}
.portfolio-tv {
position: relative;
width: min(100%, 980px);
margin: 0 auto;
isolation: isolate;
}
.portfolio-tv__screen {
position: absolute;
z-index: 1;
left: 7.7%;
top: 9.6%;
width: 65.1%;
height: 78.2%;
overflow: hidden;
border-radius: 9.5% / 13%;
background: #000;
transform: rotate(.15deg);
}
.portfolio-tv__image {
width: 100%;
height: calc(100% - clamp(58px, 5vw, 92px));
display: block;
object-fit: contain;
object-position: center;
background: #111;
opacity: 1;
filter: brightness(1) contrast(1.04) saturate(.98);
transition:
opacity .22s ease,
filter .22s ease,
transform .36s cubic-bezier(.16, 1, .3, 1);
}
.portfolio-tv__image.is-switching {
opacity: .22;
filter: brightness(1.35) contrast(1.24) saturate(.8);
transform: scale(1.035);
}
.portfolio-tv__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: clamp(58px, 5vw, 92px);
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: clamp(14px, 2vw, 32px);
align-items: center;
padding: clamp(10px, 1.1vw, 18px) clamp(18px, 2vw, 32px);
background: rgba(15, 13, 12, .94);
color: var(--cream);
}
.portfolio-tv__caption div + div {
border-left: 2px solid rgba(243,234,216,.75);
padding-left: clamp(14px, 2vw, 30px);
}
.portfolio-tv__caption span {
display: block;
margin-bottom: 4px;
color: var(--orange);
font-size: clamp(10px, .85vw, 13px);
line-height: 1;
font-weight: 950;
letter-spacing: .08em;
}
.portfolio-tv__caption strong {
display: block;
font-size: clamp(17px, 1.55vw, 28px);
line-height: 1.15;
font-weight: 950;
}
.portfolio-tv__noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .1;
mix-blend-mode: screen;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.17) 0 1px,
rgba(0,0,0,.13) 1px 3px
);
}
.portfolio-tv__frame {
position: relative;
z-index: 3;
width: 100%;
height: auto;
display: block;
pointer-events: none;
}
.portfolio-detail {
width: min(100%, 980px);
min-height: 220px;
margin: clamp(16px, 1.6vw, 24px) auto 0;
border: 4px solid var(--black);
background: var(--cream);
box-shadow: 10px 10px 0 var(--orange);
}
.portfolio-detail__body {
height: 100%;
min-height: 220px;
display: grid;
align-content: center;
padding: clamp(22px, 2.4vw, 36px) clamp(26px, 3vw, 48px);
}
.portfolio-detail__label {
margin: 0 0 10px;
color: var(--orange);
font-size: clamp(12px, 1vw, 16px);
line-height: 1;
font-weight: 950;
letter-spacing: .08em;
}
.portfolio-detail__description {
margin: 0;
max-width: 42em;
font-size: clamp(15px, 1.15vw, 19px);
line-height: 1.8;
font-weight: 800;
}
.portfolio-detail__link {
width: fit-content;
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
border-radius: 999px;
background: var(--black);
color: var(--cream);
text-decoration: none;
font-size: clamp(12px, .9vw, 14px);
font-weight: 950;
letter-spacing: .08em;
transition: transform .16s ease, background .16s ease;
}
.portfolio-detail__link:hover {
transform: scale(1.06);
background: var(--orange);
}
.portfolio-detail__link.is-hidden {
display: none;
}
.portfolio-side {
min-width: 0;
padding-top: clamp(10px, 1.2vw, 20px);
}
.portfolio-side__title {
margin: 0 0 clamp(18px, 1.8vw, 32px);
text-align: center;
color: var(--black);
font-size: clamp(44px, 4.3vw, 82px);
line-height: .9;
letter-spacing: -.05em;
font-weight: 950;
}
.portfolio-list-wrap {
position: relative;
height: clamp(560px, 61vh, 760px);
overflow: hidden;
padding: 48px 4px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.portfolio-list {
height: 100%;
margin: 0;
padding: 10px 4px;
list-style: none;
overflow-y: auto;
display: grid;
gap: 14px;
scrollbar-width: none;
}
.portfolio-list::-webkit-scrollbar {
display: none;
}
.portfolio-list-arrow {
position: absolute;
left: 50%;
z-index: 5;
transform: translateX(-50%);
border: 0;
background: transparent;
color: var(--black);
font-size: clamp(32px, 2.8vw, 52px);
line-height: 1;
font-weight: 950;
cursor: pointer;
}
.portfolio-list-arrow--up {
top: 0;
}
.portfolio-list-arrow--down {
bottom: 0;
}
.portfolio-tape {
position: relative;
width: 100%;
min-height: clamp(92px, 8vw, 128px);
display: grid;
grid-template-columns: clamp(76px, 6vw, 104px) 1fr;
align-items: stretch;
border: 4px solid var(--black);
border-radius: 6px;
background: var(--cream);
color: var(--black);
cursor: pointer;
overflow: hidden;
transition:
background .16s ease,
color .16s ease,
transform .16s ease,
box-shadow .16s ease;
}
.portfolio-tape:hover,
.portfolio-tape.is-active {
background: var(--orange);
color: var(--cream);
transform: translateX(-8px);
box-shadow: 7px 7px 0 var(--black);
}
.portfolio-tape__reel {
position: relative;
display: grid;
place-items: center;
background: #111;
color: var(--cream);
border-right: 4px solid var(--black);
}
.portfolio-tape__reel::before {
content: "PORTFOLIO";
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
color: var(--cream);
font-size: 10px;
line-height: 1;
font-weight: 950;
letter-spacing: .08em;
}
.portfolio-tape__reel::after {
content: "";
width: clamp(40px, 3.6vw, 58px);
height: clamp(40px, 3.6vw, 58px);
border-radius: 50%;
border: 4px solid #777;
background:
radial-gradient(circle, #ddd 0 10%, transparent 11% 100%),
conic-gradient(from 20deg, #222 0 20%, #999 20% 32%, #222 32% 55%, #999 55% 68%, #222 68% 100%);
box-shadow: inset 0 0 12px rgba(255,255,255,.15);
}
.portfolio-tape__body {
position: relative;
padding: clamp(14px, 1.4vw, 22px) clamp(18px, 1.8vw, 28px);
}
.portfolio-tape__date {
position: absolute;
right: clamp(14px, 1.4vw, 22px);
top: clamp(14px, 1.4vw, 22px);
font-size: clamp(13px, 1vw, 18px);
line-height: 1;
font-weight: 950;
}
.portfolio-tape__client {
display: block;
padding-right: 6em;
margin-bottom: 6px;
font-size: clamp(17px, 1.45vw, 27px);
line-height: 1.12;
font-weight: 950;
}
.portfolio-tape__title {
display: block;
padding-right: 2em;
font-size: clamp(18px, 1.55vw, 30px);
line-height: 1.15;
font-weight: 950;
}
@media (max-width: 1100px) {
.portfolio-layout {
grid-template-columns: 1fr;
}
.portfolio-header__title {
font-size: clamp(78px, 17vw, 180px);
}
.portfolio-side__title {
margin-top: 32px;
}
.portfolio-list-wrap {
height: 480px;
}
}
@media (max-width: 700px) {
.portfolio-section {
padding-inline: 18px;
}
.portfolio-tv__caption {
grid-template-columns: 1fr;
gap: 6px;
}
.portfolio-tv__caption div + div {
border-left: 0;
padding-left: 0;
}
.portfolio-tv__caption strong {
font-size: 13px;
}
.portfolio-tv__image {
height: calc(100% - 96px);
}
.portfolio-detail,
.portfolio-detail__body {
min-height: 200px;
}
}
/* ===== REV03 PATCH: file:// compatible + TV fitting adjustment ===== */
/* TV内の画像表示を少し広げ、下帯の食い込み感を軽減 */
.portfolio-tv__screen {
left: 7.9% !important;
top: 8.7% !important;
width: 64.8% !important;
height: 80.1% !important;
border-radius: 10% / 14% !important;
}
.portfolio-tv__image {
height: calc(100% - clamp(54px, 4.8vw, 84px)) !important;
object-fit: contain !important;
object-position: center !important;
}
.portfolio-tv__caption {
min-height: clamp(54px, 4.8vw, 84px) !important;
padding-top: clamp(8px, .9vw, 14px) !important;
padding-bottom: clamp(8px, .9vw, 14px) !important;
}
/* ローカル直開き時でもリスト領域が確実に見えるように */
.portfolio-list,
.portfolio-list li,
.portfolio-tape {
visibility: visible !important;
opacity: 1 !important;
}
/* PROJECT LISTの視認性調整 */
.portfolio-side {
position: relative !important;
z-index: 3 !important;
}
/* DETAILはOVERVIEW専用として少し締める */
.portfolio-detail {
min-height: 190px !important;
}
.portfolio-detail__body {
min-height: 190px !important;
}
/* ===== REV04 PATCH: center-snap VHS list + larger TV screen ===== */
.portfolio-side {
padding-top: 0 !important;
}
.portfolio-side__title {
display: none !important;
}
.portfolio-tv {
width: min(100%, 1040px) !important;
}
.portfolio-tv__screen {
left: 6.7% !important;
top: 7.6% !important;
width: 67.9% !important;
height: 83.2% !important;
border-radius: 10.5% / 14.5% !important;
}
.portfolio-tv__caption {
display: none !important;
}
.portfolio-tv__image {
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
object-position: center !important;
background: #111 !important;
}
.portfolio-detail {
width: min(100%, 1040px) !important;
margin-top: clamp(12px, 1.2vw, 18px) !important;
}
.portfolio-list-wrap {
height: clamp(640px, 72vh, 900px) !important;
padding-top: 52px !important;
padding-bottom: 52px !important;
}
.portfolio-list-wrap::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: clamp(92px, 8vw, 128px);
transform: translateY(-50%);
border: 3px solid rgba(35, 25, 22, .32);
border-radius: 7px;
pointer-events: none;
z-index: 1;
}
.portfolio-tape {
text-align: left !important;
}
.portfolio-tape:hover {
background: var(--cream) !important;
color: var(--black) !important;
transform: none !important;
box-shadow: none !important;
}
.portfolio-tape.is-active {
background: var(--orange) !important;
color: var(--cream) !important;
transform: translateX(-8px) !important;
box-shadow: 7px 7px 0 var(--black) !important;
}
.portfolio-tape__body {
text-align: left !important;
min-width: 0 !important;
}
.portfolio-tape__client,
.portfolio-tape__title {
display: block !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.portfolio-tape__client {
padding-right: 6.5em !important;
font-size: clamp(16px, 1.25vw, 24px) !important;
}
.portfolio-tape__title {
padding-right: 2em !important;
font-size: clamp(17px, 1.4vw, 27px) !important;
}
.portfolio-tape__date {
font-size: clamp(12px, .9vw, 16px) !important;
}
.portfolio-list-arrow {
z-index: 6 !important;
color: var(--black) !important;
opacity: .9 !important;
}
@media (max-width: 1100px) {
.portfolio-list-wrap {
height: 520px !important;
}
}
/* ===== REV05 PATCH ===== */
.portfolio-section__inner {
width: min(100%, 1820px) !important;
}
.portfolio-layout {
grid-template-columns: minmax(640px, 56fr) minmax(520px, 44fr) !important;
gap: clamp(26px, 3.2vw, 58px) !important;
}
.portfolio-tv {
width: min(100%, 1120px) !important;
}
.portfolio-tv__screen {
left: 6.1% !important;
top: 6.9% !important;
width: 69.2% !important;
height: 84.8% !important;
}
.portfolio-list-wrap::before {
display: none !important;
}
.portfolio-list-wrap {
height: clamp(680px, 76vh, 960px) !important;
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.portfolio-list {
overscroll-behavior: contain !important;
}
.portfolio-tape__reel::before {
content: none !important;
display: none !important;
}
.portfolio-tape__body {
text-align: left !important;
display: grid !important;
align-content: center !important;
}
.portfolio-tape__client,
.portfolio-tape__title {
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.portfolio-tape__client {
font-size: clamp(15px, 1.12vw, 22px) !important;
}
.portfolio-tape__title {
font-size: clamp(17px, 1.32vw, 26px) !important;
}
.portfolio-detail {
width: min(100%, 1120px) !important;
min-height: 230px !important;
height: 230px !important;
}
.portfolio-detail__body {
min-height: 230px !important;
height: 230px !important;
align-content: center !important;
}
.portfolio-detail__description {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.portfolio-detail__link.is-disabled,
.portfolio-detail__link.is-hidden {
display: inline-flex !important;
visibility: hidden !important;
pointer-events: none !important;
}
.portfolio-tape.is-active {
background: var(--orange) !important;
color: var(--cream) !important;
transform: translateX(-6px) !important;
box-shadow: 7px 7px 0 var(--black) !important;
}
.portfolio-tape:hover:not(.is-active) {
background: var(--cream) !important;
color: var(--black) !important;
transform: none !important;
box-shadow: none !important;
}
@media (max-width: 1300px) {
.portfolio-layout {
grid-template-columns: minmax(560px, 55fr) minmax(440px, 45fr) !important;
}
.portfolio-list-wrap {
height: 620px !important;
}
}
@media (max-width: 1100px) {
.portfolio-layout {
grid-template-columns: 1fr !important;
}
.portfolio-list-wrap {
height: 520px !important;
}
.portfolio-detail,
.portfolio-detail__body {
height: auto !important;
min-height: 220px !important;
}
}
/* ===== REV06 PATCH ===== */
.portfolio-detail__body {
position: relative !important;
}
.portfolio-detail__link {
justify-self: end !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.portfolio-tv__noise {
z-index: 5 !important;
opacity: 0 !important;
mix-blend-mode: screen !important;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.9) 0 1px,
rgba(0,0,0,.9) 1px 2px,
rgba(255,255,255,.25) 2px 4px
),
repeating-linear-gradient(
90deg,
rgba(255,0,0,.18) 0 2px,
rgba(0,255,255,.14) 2px 4px,
rgba(0,0,255,.12) 4px 6px
) !important;
transform: translate3d(0,0,0) scale(1.02) !important;
pointer-events: none !important;
}
.portfolio-tv__noise.is-active {
animation: portfolio-crt-noise .36s steps(6, end) both !important;
}
.portfolio-tv__screen::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
radial-gradient(circle at center, rgba(255,255,255,.45), transparent 46%),
linear-gradient(to bottom, transparent 0 45%, rgba(255,255,255,.75) 50%, transparent 56%);
mix-blend-mode: screen;
}
.portfolio-tv__screen:has(.portfolio-tv__noise.is-active)::after {
animation: portfolio-crt-flash .36s ease both;
}
.portfolio-tv__image.is-switching {
filter:
brightness(1.45)
contrast(1.35)
saturate(.65)
hue-rotate(8deg) !important;
opacity: .36 !important;
transform: scale(1.045) skewX(.6deg) !important;
}
@keyframes portfolio-crt-noise {
0% {
opacity: 0;
transform: translateX(0) scale(1.02);
filter: contrast(1);
}
12% {
opacity: .85;
transform: translateX(-3px) scale(1.025);
filter: contrast(1.8);
}
28% {
opacity: .45;
transform: translateX(4px) scale(1.018);
}
46% {
opacity: .95;
transform: translateX(-7px) scale(1.03);
filter: contrast(2.2);
}
70% {
opacity: .38;
transform: translateX(2px) scale(1.012);
}
100% {
opacity: 0;
transform: translateX(0) scale(1);
filter: contrast(1);
}
}
@keyframes portfolio-crt-flash {
0% { opacity: 0; }
20% { opacity: .55; }
48% { opacity: .15; }
100% { opacity: 0; }
}
.portfolio-detail__link.is-disabled,
.portfolio-detail__link.is-hidden {
display: inline-flex !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ===== REV09 PATCH: CRT noise + lightweight RGB shift ===== */
.portfolio-tv__image.is-switching {
animation: portfolio-rgb-shift .32s ease-out both !important;
filter:
brightness(1.45)
contrast(1.35)
saturate(.65)
drop-shadow(4px 0 rgba(255,0,0,.34))
drop-shadow(-4px 0 rgba(0,180,255,.34)) !important;
opacity: .52 !important;
transform: scale(1.045) skewX(.6deg) !important;
}
@keyframes portfolio-rgb-shift {
0% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
14% {
opacity: .92;
filter:
brightness(1.62)
contrast(1.48)
saturate(.58)
drop-shadow(5px 0 rgba(255,0,0,.38))
drop-shadow(-5px 0 rgba(0,180,255,.38));
transform: scale(1.035) skewX(.85deg);
}
38% {
opacity: .62;
filter:
brightness(.92)
contrast(1.72)
saturate(.35)
drop-shadow(3px 0 rgba(255,0,0,.30))
drop-shadow(-3px 0 rgba(0,180,255,.30));
transform: scale(1.022) skewX(-.45deg);
}
68% {
opacity: .84;
filter:
brightness(1.22)
contrast(1.28)
saturate(.72)
drop-shadow(2px 0 rgba(255,0,0,.22))
drop-shadow(-2px 0 rgba(0,180,255,.22));
transform: scale(1.012) skewX(.25deg);
}
100% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
}
/* Make the existing CRT noise feel synced with the RGB shift. */
.portfolio-tv__noise.is-active {
animation: portfolio-crt-noise .40s steps(7, end) both !important;
}
/* ===== MESSAGE SECTION FINAL ===== */
.message-section {
position: relative;
display: grid;
grid-template-columns: minmax(132px, 17vw) minmax(420px, 1fr) minmax(132px, 17vw);
min-height: 100vh;
overflow: hidden;
background: #f3ead8;
color: #231916;
padding: clamp(62px, 7vw, 118px) 0 clamp(64px, 7vw, 120px);
}
.message-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .055;
background-image: radial-gradient(rgba(35,25,22,.32) .75px, transparent .75px);
background-size: 4px 4px;
mix-blend-mode: multiply;
}
.message-section__body {
position: relative;
z-index: 2;
width: min(100%, 900px);
margin: 0 auto;
text-align: center;
padding: 0 clamp(16px, 4vw, 72px);
}
.message-section__catch {
margin: 0 0 clamp(62px, 6vw, 96px);
/* Phase D(1.1.8) 修正④C: 同セクションの .message-section__company（BRIAREUS株式会社）に
実際に適用されている色 #de5536（= --orange と同値）へ統一。company 側は変更なし。 */
color: #de5536;
font-size: clamp(24px, 2.5vw, 46px);
line-height: 1.4;
font-weight: 950;
letter-spacing: .045em;
}
.message-section__text {
display: grid;
gap: clamp(14px, 1.35vw, 24px);
font-size: clamp(18px, 1.55vw, 30px);
line-height: 1.38;
font-weight: 950;
letter-spacing: .045em;
}
.message-section__text p {
margin: 0;
}
.message-section__text p:nth-child(5),
.message-section__text p:nth-child(10),
.message-section__text p:nth-child(13) {
margin-top: clamp(30px, 4.3vw, 70px);
}
.message-section__company {
margin: clamp(82px, 8vw, 136px) 0 0;
color: #de5536;
font-size: clamp(30px, 3.1vw, 60px);
line-height: 1;
font-weight: 950;
letter-spacing: .04em;
}
.message-section__ornaments {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
align-items: stretch;
pointer-events: none;
}
.message-section__ornaments--left {
justify-content: flex-start;
}
.message-section__ornaments--right {
justify-content: flex-end;
}
.message-section__piece-grid {
width: min(100%, 260px);
display: grid;
grid-template-columns: repeat(2, minmax(54px, 1fr));
grid-auto-rows: clamp(58px, 7.8vw, 118px);
align-content: stretch;
gap: clamp(0px, .28vw, 6px);
}
.message-piece {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Edges: let the ornaments feel like they are continuing outside the canvas */
.message-section__ornaments--left .message-section__piece-grid {
transform: translateX(-4%);
}
.message-section__ornaments--right .message-section__piece-grid {
transform: translateX(4%);
}
/* Slight rhythm so the columns do not feel mechanically repeated */
.message-section__ornaments--left .message-piece:nth-child(4n+1) {
transform: translateX(-7%) rotate(-1deg);
}
.message-section__ornaments--left .message-piece:nth-child(4n+4) {
transform: translateX(5%) rotate(1deg);
}
.message-section__ornaments--right .message-piece:nth-child(4n+2) {
transform: translateX(7%) rotate(1deg);
}
.message-section__ornaments--right .message-piece:nth-child(4n+3) {
transform: translateX(-5%) rotate(-1deg);
}
@media (max-width: 1100px) {
.message-section {
grid-template-columns: minmax(90px, 15vw) 1fr minmax(90px, 15vw);
}
.message-section__piece-grid {
width: min(100%, 180px);
grid-auto-rows: clamp(46px, 8vw, 88px);
}
.message-section__text {
font-size: clamp(16px, 2vw, 24px);
}
}
@media (max-width: 720px) {
.message-section {
grid-template-columns: 1fr;
padding-top: 72px;
}
.message-section__ornaments {
position: absolute;
top: 0;
bottom: 0;
width: 74px;
opacity: .34;
}
.message-section__ornaments--left {
left: 0;
}
.message-section__ornaments--right {
right: 0;
}
.message-section__piece-grid {
width: 100%;
grid-auto-rows: 56px;
}
.message-section__body {
width: min(100%, 560px);
}
.message-section__catch {
margin-bottom: 56px;
}
}
/* ===== MESSAGE SECTION REV02: ornaments gapless + edge contact ===== */
/* メッセージ本体の余白は維持しつつ、左右装飾だけ上下端に接触させる */
.message-section {
align-items: stretch !important;
}
.message-section__ornaments {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
width: clamp(260px, 25vw, 430px) !important;
min-height: 100% !important;
height: 100% !important;
display: flex !important;
align-items: stretch !important;
z-index: 1 !important;
}
.message-section__ornaments--left {
left: 0 !important;
justify-content: flex-start !important;
}
.message-section__ornaments--right {
right: 0 !important;
justify-content: flex-end !important;
}
/* 2列素材を完全に詰める。行間・列間ともに0 */
.message-section__piece-grid {
width: 100% !important;
height: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(11, 1fr) !important;
grid-auto-rows: unset !important;
gap: 0 !important;
align-content: stretch !important;
align-items: stretch !important;
justify-content: stretch !important;
}
/* 各素材のセル内余白を排除。隣接オブジェクト同士の見かけ上の隙間を減らす */
.message-piece {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transform: none !important;
}
/* 以前のランダム風ズラしを解除。隙間の原因になるため */
.message-section__ornaments--left .message-piece,
.message-section__ornaments--right .message-piece,
.message-section__ornaments--left .message-piece:nth-child(4n+1),
.message-section__ornaments--left .message-piece:nth-child(4n+4),
.message-section__ornaments--right .message-piece:nth-child(4n+2),
.message-section__ornaments--right .message-piece:nth-child(4n+3) {
transform: none !important;
}
/* 本文は装飾より前面に固定 */
.message-section__body {
z-index: 3 !important;
}
/* 画面が狭い時も左右装飾を背景化し、本文余白は維持 */
@media (max-width: 1100px) {
.message-section__ornaments {
width: clamp(120px, 18vw, 220px) !important;
}
}
@media (max-width: 720px) {
.message-section__ornaments {
width: 78px !important;
opacity: .34 !important;
}
.message-section__piece-grid {
grid-template-rows: repeat(11, 1fr) !important;
}
}
/* ===== PORTFOLIO REV10: slower RGB shift ===== */
/* 既存のRGBズレを上書き。少しゆったり、上品に見える速度へ */
.portfolio-tv__image.is-switching {
animation: portfolio-rgb-shift-slow .68s cubic-bezier(.16, 1, .3, 1) both !important;
filter:
brightness(1.28)
contrast(1.22)
saturate(.78)
drop-shadow(3px 0 rgba(255,0,0,.26))
drop-shadow(-3px 0 rgba(0,180,255,.26)) !important;
opacity: .68 !important;
transform: scale(1.025) skewX(.35deg) !important;
}
/* CRTノイズも少しだけ長めに */
.portfolio-tv__noise.is-active {
animation: portfolio-crt-noise-slow .68s steps(8, end) both !important;
}
@keyframes portfolio-rgb-shift-slow {
0% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
18% {
opacity: .82;
filter:
brightness(1.42)
contrast(1.32)
saturate(.72)
drop-shadow(4px 0 rgba(255,0,0,.30))
drop-shadow(-4px 0 rgba(0,180,255,.30));
transform: scale(1.03) skewX(.55deg);
}
42% {
opacity: .58;
filter:
brightness(.96)
contrast(1.48)
saturate(.48)
drop-shadow(3px 0 rgba(255,0,0,.24))
drop-shadow(-3px 0 rgba(0,180,255,.24));
transform: scale(1.018) skewX(-.28deg);
}
70% {
opacity: .86;
filter:
brightness(1.12)
contrast(1.18)
saturate(.84)
drop-shadow(1.5px 0 rgba(255,0,0,.16))
drop-shadow(-1.5px 0 rgba(0,180,255,.16));
transform: scale(1.008) skewX(.12deg);
}
100% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
}
@keyframes portfolio-crt-noise-slow {
0% {
opacity: 0;
transform: translateX(0) scale(1.02);
filter: contrast(1);
}
15% {
opacity: .72;
transform: translateX(-2px) scale(1.022);
filter: contrast(1.55);
}
34% {
opacity: .42;
transform: translateX(3px) scale(1.018);
}
52% {
opacity: .82;
transform: translateX(-4px) scale(1.025);
filter: contrast(1.85);
}
78% {
opacity: .30;
transform: translateX(1px) scale(1.01);
}
100% {
opacity: 0;
transform: translateX(0) scale(1);
filter: contrast(1);
}
}
/* ===== MESSAGE SECTION REV03: fix center text layout ===== */
/* 左右装飾をabsolute化した影響で本文が左カラムへ流れる問題を修正 */
.message-section {
display: grid !important;
grid-template-columns: minmax(132px, 17vw) minmax(420px, 1fr) minmax(132px, 17vw) !important;
}
.message-section__body {
grid-column: 2 / 3 !important;
justify-self: center !important;
align-self: center !important;
position: relative !important;
z-index: 5 !important;
}
/* 装飾は本文に干渉しないよう背面固定 */
.message-section__ornaments {
z-index: 1 !important;
pointer-events: none !important;
}
/* 中央本文エリアを十分確保 */
.message-section__body {
width: min(100%, 900px) !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 小さい画面では1カラムに戻して中央配置 */
@media (max-width: 720px) {
.message-section {
display: block !important;
}
.message-section__body {
width: min(100%, 560px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ===== PORTFOLIO POWER ON EFFECT ===== */
.portfolio-tv__screen {
position: absolute !important;
}
.portfolio-tv__screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
background: #050403;
opacity: 0;
}
.portfolio-tv__screen.is-powering-on::before {
animation: portfolio-tv-power-blackout 1.45s cubic-bezier(.16, 1, .3, 1) both;
}
.portfolio-tv__screen.is-powering-on .portfolio-tv__image {
animation: portfolio-tv-image-power-on 1.45s cubic-bezier(.16, 1, .3, 1) both !important;
}
.portfolio-tv__screen.is-powering-on .portfolio-tv__noise {
animation: portfolio-tv-power-noise 1.45s steps(10, end) both !important;
}
.portfolio-tv__screen.is-powering-on::after {
animation: portfolio-tv-power-line 1.45s cubic-bezier(.16, 1, .3, 1) both !important;
opacity: 1;
background:
linear-gradient(to bottom, transparent 0 47%, rgba(255,255,255,.95) 49%, rgba(255,255,255,.9) 51%, transparent 53%),
radial-gradient(circle at center, rgba(255,255,255,.38), transparent 44%) !important;
mix-blend-mode: screen;
}
@keyframes portfolio-tv-power-blackout {
0% { opacity: 1; }
18% { opacity: 1; }
28% { opacity: .78; }
42% { opacity: .92; }
58% { opacity: .28; }
100% { opacity: 0; }
}
@keyframes portfolio-tv-image-power-on {
0% {
opacity: 0;
filter: brightness(.2) contrast(2) saturate(.2);
transform: scaleY(.02) scaleX(.82);
}
18% {
opacity: 0;
filter: brightness(.2) contrast(2) saturate(.2);
transform: scaleY(.02) scaleX(.88);
}
28% {
opacity: .7;
filter:
brightness(2.1)
contrast(1.8)
saturate(.45)
drop-shadow(5px 0 rgba(255,0,0,.35))
drop-shadow(-5px 0 rgba(0,180,255,.35));
transform: scaleY(.055) scaleX(1.08);
}
38% {
opacity: .32;
filter: brightness(.65) contrast(2.1) saturate(.35);
transform: scaleY(.12) scaleX(1.02);
}
54% {
opacity: .85;
filter:
brightness(1.7)
contrast(1.4)
saturate(.7)
drop-shadow(3px 0 rgba(255,0,0,.25))
drop-shadow(-3px 0 rgba(0,180,255,.25));
transform: scaleY(.78) scaleX(1.02);
}
76% {
opacity: .92;
filter: brightness(1.12) contrast(1.12) saturate(.92);
transform: scaleY(1.018) scaleX(1.006);
}
100% {
opacity: 1;
filter: brightness(1) contrast(1) saturate(1);
transform: scaleY(1) scaleX(1);
}
}
@keyframes portfolio-tv-power-noise {
0% { opacity: 0; transform: translateX(0) scale(1.02); }
16% { opacity: .85; transform: translateX(-5px) scale(1.03); }
30% { opacity: .42; transform: translateX(4px) scale(1.02); }
48% { opacity: .96; transform: translateX(-7px) scale(1.035); }
70% { opacity: .28; transform: translateX(2px) scale(1.01); }
100% { opacity: 0; transform: translateX(0) scale(1); }
}
@keyframes portfolio-tv-power-line {
0% { opacity: 0; transform: scaleY(.02) scaleX(.25); }
18% { opacity: .95; transform: scaleY(.02) scaleX(.45); }
28% { opacity: 1; transform: scaleY(.025) scaleX(1.08); }
42% { opacity: .72; transform: scaleY(.09) scaleX(1.02); }
60% { opacity: .42; transform: scaleY(.55) scaleX(1); }
82% { opacity: .15; transform: scaleY(1.04) scaleX(1); }
100% { opacity: 0; transform: scaleY(1) scaleX(1); }
}
/* ===== PORTFOLIO REV: dim fade before image switch ===== */
/* 画像切替時だけ、TV画面を一瞬ゆっくり暗くしてから次画像へ移行 */
.portfolio-tv__screen.is-dimming::before {
animation: portfolio-tv-dim-before-switch .86s cubic-bezier(.16, 1, .3, 1) both !important;
background:
radial-gradient(circle at center, rgba(0,0,0,.72), rgba(0,0,0,.94) 72%),
#050403 !important;
opacity: 0;
}
/* 暗転とRGBズレのテンポを合わせる */
.portfolio-tv__screen.is-dimming .portfolio-tv__image.is-switching {
animation: portfolio-rgb-shift-dim .86s cubic-bezier(.16, 1, .3, 1) both !important;
}
@keyframes portfolio-tv-dim-before-switch {
0% {
opacity: 0;
}
28% {
opacity: .18;
}
48% {
opacity: .86;
}
62% {
opacity: .92;
}
78% {
opacity: .34;
}
100% {
opacity: 0;
}
}
@keyframes portfolio-rgb-shift-dim {
0% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
28% {
opacity: .72;
filter:
brightness(.82)
contrast(1.2)
saturate(.72)
drop-shadow(2px 0 rgba(255,0,0,.18))
drop-shadow(-2px 0 rgba(0,180,255,.18));
transform: scale(1.012) skewX(.18deg);
}
48% {
opacity: .28;
filter:
brightness(.36)
contrast(1.55)
saturate(.36)
drop-shadow(4px 0 rgba(255,0,0,.30))
drop-shadow(-4px 0 rgba(0,180,255,.30));
transform: scale(1.028) skewX(.45deg);
}
62% {
opacity: .38;
filter:
brightness(.68)
contrast(1.62)
saturate(.48)
drop-shadow(4px 0 rgba(255,0,0,.30))
drop-shadow(-4px 0 rgba(0,180,255,.30));
transform: scale(1.025) skewX(-.32deg);
}
82% {
opacity: .86;
filter:
brightness(1.12)
contrast(1.2)
saturate(.82)
drop-shadow(2px 0 rgba(255,0,0,.18))
drop-shadow(-2px 0 rgba(0,180,255,.18));
transform: scale(1.01) skewX(.12deg);
}
100% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
}
/* ===== REV: shorter blackout + stronger CRT/RGB glitch ===== */
/* ブラックアウトは短く、ノイズとRGBズレを主役にする */
.portfolio-tv__screen.is-dimming::before {
animation: portfolio-tv-quick-dim-before-switch .48s cubic-bezier(.16, 1, .3, 1) both !important;
}
.portfolio-tv__screen.is-dimming .portfolio-tv__image.is-switching {
animation: portfolio-rgb-shift-strong .72s cubic-bezier(.16, 1, .3, 1) both !important;
}
/* CRTノイズを強めに */
.portfolio-tv__noise.is-active {
animation: portfolio-crt-noise-strong .72s steps(9, end) both !important;
}
@keyframes portfolio-tv-quick-dim-before-switch {
0% {
opacity: 0;
}
18% {
opacity: .22;
}
34% {
opacity: .62;
}
48% {
opacity: .38;
}
100% {
opacity: 0;
}
}
@keyframes portfolio-rgb-shift-strong {
0% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
16% {
opacity: .62;
filter:
brightness(.72)
contrast(1.4)
saturate(.52)
drop-shadow(5px 0 rgba(255,0,0,.38))
drop-shadow(-5px 0 rgba(0,190,255,.38));
transform: scale(1.025) skewX(.45deg);
}
28% {
opacity: .36;
filter:
brightness(1.75)
contrast(1.95)
saturate(.42)
hue-rotate(8deg)
drop-shadow(9px 0 rgba(255,0,0,.48))
drop-shadow(-9px 0 rgba(0,190,255,.48));
transform: scale(1.048) skewX(1.05deg);
}
43% {
opacity: .58;
filter:
brightness(.58)
contrast(2.05)
saturate(.32)
hue-rotate(-10deg)
drop-shadow(-7px 0 rgba(255,0,0,.42))
drop-shadow(7px 0 rgba(0,190,255,.42));
transform: scale(1.035) skewX(-.8deg);
}
62% {
opacity: .82;
filter:
brightness(1.35)
contrast(1.52)
saturate(.72)
drop-shadow(5px 0 rgba(255,0,0,.32))
drop-shadow(-5px 0 rgba(0,190,255,.32));
transform: scale(1.02) skewX(.38deg);
}
82% {
opacity: .92;
filter:
brightness(1.08)
contrast(1.18)
saturate(.9)
drop-shadow(2px 0 rgba(255,0,0,.18))
drop-shadow(-2px 0 rgba(0,190,255,.18));
transform: scale(1.006) skewX(.08deg);
}
100% {
opacity: 1;
filter:
brightness(1)
contrast(1)
saturate(1)
drop-shadow(0 0 rgba(255,0,0,0))
drop-shadow(0 0 rgba(0,180,255,0));
transform: scale(1) skewX(0);
}
}
@keyframes portfolio-crt-noise-strong {
0% {
opacity: 0;
transform: translateX(0) scale(1.02);
filter: contrast(1);
}
10% {
opacity: .92;
transform: translateX(-7px) scale(1.035);
filter: contrast(2.1);
}
22% {
opacity: .38;
transform: translateX(5px) scale(1.018);
filter: contrast(1.4);
}
34% {
opacity: 1;
transform: translateX(-10px) scale(1.04);
filter: contrast(2.7);
}
50% {
opacity: .52;
transform: translateX(8px) scale(1.024);
filter: contrast(2);
}
68% {
opacity: .86;
transform: translateX(-5px) scale(1.028);
filter: contrast(2.2);
}
84% {
opacity: .28;
transform: translateX(2px) scale(1.01);
filter: contrast(1.2);
}
100% {
opacity: 0;
transform: translateX(0) scale(1);
filter: contrast(1);
}
}
/* ==================== PARTNER CSS ==================== */
/* ===== SOURCE: briarfus_partner_section_rev02/assets/css/partner.css ===== */
:root {
--partner-bg: #9ca95b;
--partner-cream: #f3ead8;
--partner-black: #231916;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--partner-bg);
}
.partner-section {
position: relative;
overflow: hidden;
background: var(--partner-bg);
color: var(--partner-cream);
padding: clamp(40px, 5vw, 86px) 0 clamp(76px, 9vw, 150px);
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
.partner-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .06;
background-image: radial-gradient(rgba(35,25,22,.28) .75px, transparent .75px);
background-size: 4px 4px;
mix-blend-mode: multiply;
}
.partner-section__inner {
position: relative;
z-index: 1;
width: min(100%, 1760px);
margin: 0 auto;
}
.partner-header {
text-align: center;
margin-bottom: clamp(64px, 8vw, 136px);
padding-inline: clamp(24px, 5vw, 72px);
}
.partner-header__title {
margin: 0;
color: var(--partner-cream);
font-size: clamp(92px, 13.6vw, 265px);
line-height: .72;
letter-spacing: -.07em;
font-weight: 950;
}
.partner-header__lead {
margin: clamp(70px, 8vw, 130px) auto 0;
display: grid;
gap: clamp(14px, 1.4vw, 24px);
font-size: clamp(18px, 1.55vw, 30px);
line-height: 1.35;
font-weight: 950;
letter-spacing: .045em;
}
.partner-header__lead p {
margin: 0;
}
.partner-list {
display: grid;
gap: clamp(82px, 9.5vw, 160px);
}
/* 写真を大きく、テキスト領域も広く取る */
.partner-card {
--image-slide: -96px;
--text-slide: 40px;
position: relative;
display: grid;
grid-template-columns: minmax(560px, 1.2fr) minmax(520px, 1fr);
gap: clamp(48px, 5vw, 96px);
align-items: center;
min-height: clamp(420px, 37vw, 620px);
}
.partner-card--reverse {
--image-slide: 96px;
--text-slide: -40px;
grid-template-columns: minmax(520px, 1fr) minmax(560px, 1.2fr);
}
.partner-card__visual {
position: relative;
display: block;
min-height: clamp(360px, 35vw, 560px);
border-radius: 0 34px 34px 0;
overflow: hidden;
background: var(--partner-cream);
box-shadow: 30px 30px 0 var(--partner-black);
transform: translateX(var(--image-slide));
opacity: 0;
transition:
transform .72s cubic-bezier(.16, 1, .3, 1),
opacity .55s ease;
}
.partner-card--reverse .partner-card__visual {
grid-column: 2;
grid-row: 1;
border-radius: 34px 0 0 34px;
box-shadow: -30px 30px 0 var(--partner-black);
}
.partner-card__visual img {
width: 100%;
height: 100%;
min-height: clamp(360px, 35vw, 560px);
display: block;
object-fit: cover;
transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.partner-card__visual:hover img {
transform: scale(1.045);
}
.partner-card__content {
width: min(100%, 680px);
padding-inline: clamp(16px, 2.2vw, 44px);
transform: translateY(16px) translateX(var(--text-slide));
opacity: 0;
transition:
transform .62s cubic-bezier(.16, 1, .3, 1) .28s,
opacity .42s ease .28s;
}
.partner-card--reverse .partner-card__content {
grid-column: 1;
grid-row: 1;
justify-self: end;
}
.partner-card.is-visible .partner-card__visual,
.partner-card.is-visible .partner-card__content {
transform: translateX(0) translateY(0);
opacity: 1;
}
.partner-card__area {
display: inline-flex;
width: fit-content;
margin: 0 0 clamp(10px, 1vw, 16px);
padding: .22em .7em .28em;
border-radius: 4px;
background: var(--partner-cream);
color: var(--partner-bg);
font-size: clamp(16px, 1.35vw, 26px);
line-height: 1;
font-weight: 950;
letter-spacing: .04em;
}
/* 長めの社名でも2行になりにくいように調整 */
.partner-card__name {
margin: 0 0 clamp(24px, 2.4vw, 40px);
color: var(--partner-cream);
font-size: clamp(34px, 3.05vw, 58px);
line-height: 1.04;
font-weight: 950;
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.partner-card__description {
margin: 0;
max-width: 640px;
color: var(--partner-cream);
font-size: clamp(18px, 1.55vw, 29px);
line-height: 1.75;
font-weight: 950;
letter-spacing: .045em;
}
.partner-card__link {
display: inline-flex;
margin-top: clamp(26px, 2.4vw, 42px);
color: var(--partner-cream);
text-decoration: none;
font-size: clamp(18px, 1.75vw, 32px);
line-height: 1;
font-weight: 950;
letter-spacing: .11em;
transition: transform .16s ease, opacity .16s ease;
}
.partner-card__link:hover {
transform: translateX(8px);
opacity: .78;
}
/* ロゴ系はcontain */
.partner-card[data-partner-id="ujigami"] .partner-card__visual img {
object-fit: contain;
padding: clamp(42px, 4.5vw, 82px);
background: var(--partner-cream);
}
@media (max-width: 1180px) {
.partner-section__inner {
width: min(100%, 1100px);
}
.partner-card,
.partner-card--reverse {
grid-template-columns: 1fr;
gap: 34px;
min-height: auto;
}
.partner-card--reverse .partner-card__visual,
.partner-card--reverse .partner-card__content {
grid-column: auto;
grid-row: auto;
}
.partner-card__visual,
.partner-card--reverse .partner-card__visual {
width: min(100%, 860px);
margin: 0 auto;
border-radius: 26px;
box-shadow: 18px 18px 0 var(--partner-black);
}
.partner-card__content,
.partner-card--reverse .partner-card__content {
width: min(100%, 860px);
margin: 0 auto;
justify-self: center;
}
.partner-card__name {
font-size: clamp(32px, 5vw, 54px);
}
.partner-card__description {
max-width: none;
}
}
@media (max-width: 640px) {
.partner-section {
padding-top: 58px;
}
.partner-header__title {
font-size: clamp(70px, 22vw, 120px);
}
.partner-header__lead {
margin-top: 52px;
}
.partner-card__visual,
.partner-card__visual img {
min-height: 270px;
}
.partner-card__visual,
.partner-card--reverse .partner-card__visual {
box-shadow: 12px 12px 0 var(--partner-black);
}
.partner-card__name {
font-size: clamp(28px, 8vw, 42px);
}
}
/* ===== PARTNER REV03 ===== */
/* Ujigamiなど下に伸びる字形が切れて見えないよう、行高と余白を調整 */
.partner-card__name {
line-height: 1.18 !important;
padding-bottom: .08em !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* 長い名称対策はフォントサイズと幅で吸収 */
.partner-card__content {
width: min(100%, 740px) !important;
}
.partner-card__name {
font-size: clamp(32px, 2.75vw, 52px) !important;
}
/* VIEW MOREを同色ボタン化 */
.partner-card__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-width: clamp(180px, 13vw, 260px) !important;
min-height: clamp(46px, 3.4vw, 62px) !important;
margin-top: clamp(26px, 2.4vw, 42px) !important;
padding: .72em 1.15em .78em !important;
border: 3px solid var(--partner-cream) !important;
border-radius: 999px !important;
background: var(--partner-cream) !important;
color: var(--partner-bg) !important;
text-decoration: none !important;
font-size: clamp(16px, 1.42vw, 26px) !important;
line-height: 1 !important;
font-weight: 950 !important;
letter-spacing: .1em !important;
box-shadow: 8px 8px 0 var(--partner-black) !important;
transition:
transform .16s ease,
background .16s ease,
color .16s ease,
border-color .16s ease,
box-shadow .16s ease !important;
}
.partner-card__link:hover,
.partner-card__link:focus-visible,
.partner-card__link:active {
background: #de5536 !important;
border-color: #de5536 !important;
color: var(--partner-cream) !important;
transform: translate(4px, 4px) !important;
box-shadow: 4px 4px 0 var(--partner-black) !important;
}
/* スマホ時も文字切れを避ける */
@media (max-width: 640px) {
.partner-card__name {
line-height: 1.18 !important;
font-size: clamp(28px, 7.4vw, 40px) !important;
}
.partner-card__link {
min-width: 170px !important;
}
}
/* ===== PARTNER REV04: all image corners rounded ===== */
/* 写真表示領域の全角を角丸に統一 */
.partner-card__visual,
.partner-card--reverse .partner-card__visual {
border-radius: 32px !important;
overflow: hidden !important;
}
/* 画像そのものも角丸にして、拡大ホバー時のはみ出しを防止 */
.partner-card__visual img,
.partner-card--reverse .partner-card__visual img {
border-radius: 32px !important;
}
/* 影は現在のオフセット方向を維持しつつ、角丸の印象に揃える */
.partner-card__visual {
box-shadow: 30px 30px 0 var(--partner-black) !important;
}
.partner-card--reverse .partner-card__visual {
box-shadow: -30px 30px 0 var(--partner-black) !important;
}
/* 画面幅が狭い場合も角丸を維持 */
@media (max-width: 1180px) {
.partner-card__visual,
.partner-card--reverse .partner-card__visual,
.partner-card__visual img,
.partner-card--reverse .partner-card__visual img {
border-radius: 26px !important;
}
}
@media (max-width: 640px) {
.partner-card__visual,
.partner-card--reverse .partner-card__visual,
.partner-card__visual img,
.partner-card--reverse .partner-card__visual img {
border-radius: 22px !important;
}
}
/* ===== TOP PARTNER REDESIGN ===== */
.top-partner-section {
--top-partner-bg: #9CA95B;
--top-partner-cream: #F3EAD8;
--top-partner-orange: #C95C3F;
--top-partner-black: #231916;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background: var(--top-partner-bg) !important;
color: var(--top-partner-cream) !important;
padding: clamp(80px, 8vw, 128px) 0 clamp(84px, 8vw, 132px) !important;
}
.top-partner-section::before {
opacity: .04 !important;
}
.top-partner-inner {
width: min(100% - 48px, 1480px) !important;
margin: 0 auto !important;
}
.top-partner-header {
position: relative !important;
z-index: 2 !important;
max-width: 980px !important;
margin: 0 auto clamp(46px, 5vw, 76px) !important;
padding-inline: 0 !important;
text-align: center !important;
}
.top-partner-title {
margin: 0 !important;
color: var(--top-partner-cream) !important;
font-size: clamp(92px, 13vw, 210px) !important;
line-height: .82 !important;
font-weight: 950 !important;
letter-spacing: -.06em !important;
text-align: center !important;
}
.top-partner-lead {
margin: clamp(26px, 3vw, 42px) auto 0 !important;
display: grid !important;
gap: 8px !important;
color: var(--top-partner-cream) !important;
font-size: clamp(17px, 1.45vw, 24px) !important;
line-height: 1.65 !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
text-align: center !important;
}
.top-partner-lead p {
margin: 0 !important;
}
.top-partner-pieces {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.top-partner-piece {
position: absolute;
display: grid;
place-items: center;
width: clamp(220px, 20vw, 360px);
height: clamp(150px, 13vw, 238px);
color: rgba(243, 234, 216, .48);
border: 3px solid rgba(243, 234, 216, .34);
background: rgba(243, 234, 216, .08);
font-size: clamp(32px, 3.3vw, 60px);
font-weight: 950;
letter-spacing: -.04em;
opacity: .45;
filter: blur(.1px);
}
.top-partner-piece::before,
.top-partner-piece::after {
content: "";
position: absolute;
width: 58px;
height: 58px;
border: 3px solid rgba(243, 234, 216, .34);
border-radius: 50%;
background: var(--top-partner-bg);
}
.top-partner-piece--bria {
left: clamp(-72px, -3vw, -24px);
top: clamp(122px, 13vw, 210px);
transform: rotate(-7deg);
border-radius: 20px;
animation: topPartnerPieceFloatA 7.8s ease-in-out infinite;
}
.top-partner-piece--bria::before {
left: -32px;
top: 50%;
transform: translateY(-50%);
background: rgba(243, 234, 216, .1);
}
.top-partner-piece--bria::after {
left: 50%;
bottom: -32px;
transform: translateX(-50%);
background: rgba(243, 234, 216, .1);
}
.top-partner-piece--partner {
right: clamp(-86px, -4vw, -28px);
top: clamp(122px, 13vw, 210px);
transform: rotate(5deg);
border-radius: 20px;
animation: topPartnerPieceFloatB 8.6s ease-in-out infinite;
}
.top-partner-piece--partner::before {
left: -32px;
top: 50%;
transform: translateY(-50%);
}
.top-partner-piece--partner::after {
right: -32px;
top: 50%;
transform: translateY(-50%);
background: rgba(243, 234, 216, .1);
}
.top-partner-piece--partner {
box-shadow: 0 -31px 0 -3px rgba(243, 234, 216, .08);
}
@keyframes topPartnerPieceFloatA {
0%, 100% { transform: translateY(0) rotate(-7deg); }
50% { transform: translateY(-8px) rotate(-4deg); }
}
@keyframes topPartnerPieceFloatB {
0%, 100% { transform: translateY(0) rotate(5deg); }
50% { transform: translateY(-10px) rotate(3deg); }
}
.top-partner-slider {
position: relative;
z-index: 2;
}
.top-partner-track {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - 48px) / 3) !important;
gap: 24px !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
padding: 8px 2px 18px !important;
}
.top-partner-track::-webkit-scrollbar {
display: none;
}
.top-partner-slider.is-static .top-partner-track {
overflow-x: visible !important;
}
.top-partner-card {
position: relative;
min-height: 610px;
scroll-snap-align: start;
border: 1px solid rgba(35, 25, 22, .14);
border-radius: 8px;
background: var(--top-partner-cream);
color: var(--top-partner-black);
overflow: hidden;
box-shadow: 0 22px 54px rgba(35, 25, 22, .12);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.top-partner-card:hover {
transform: translateY(-6px);
border-color: rgba(243, 234, 216, .72);
box-shadow: 0 30px 64px rgba(35, 25, 22, .18);
}
.top-partner-card__number {
position: absolute;
right: 18px;
top: 10px;
z-index: 2;
color: rgba(156, 169, 91, .18);
font-size: clamp(74px, 8vw, 118px);
line-height: 1;
font-weight: 950;
letter-spacing: -.08em;
pointer-events: none;
}
.top-partner-card__image {
position: relative;
display: block;
height: 255px;
overflow: hidden;
background: var(--top-partner-black);
text-decoration: none;
}
.top-partner-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.top-partner-card[data-partner-id="ujigami"] .top-partner-card__image img {
object-fit: contain;
padding: 34px;
background: var(--top-partner-cream);
}
.top-partner-card:hover .top-partner-card__image img {
transform: scale(1.045);
}
.top-partner-card__category {
position: absolute;
left: 18px;
top: 18px;
z-index: 2;
padding: 7px 12px 8px;
border-radius: 999px;
background: var(--top-partner-bg);
color: var(--top-partner-cream);
font-size: 13px;
line-height: 1;
font-weight: 950;
letter-spacing: .08em;
}
.top-partner-card__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 354px;
padding: 30px 28px 28px;
}
.top-partner-card__body h3 {
margin: 0 0 16px;
color: var(--top-partner-bg);
font-size: clamp(27px, 2.4vw, 38px);
line-height: 1.05;
font-weight: 950;
letter-spacing: -.02em;
}
.top-partner-card__body p {
margin: 0;
color: var(--top-partner-black);
font-size: 16px;
line-height: 1.85;
font-weight: 800;
}
.top-partner-card__tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 22px 0 0;
padding: 0;
}
.top-partner-card__tags li {
padding: 7px 10px 8px;
border: 1px solid rgba(156, 169, 91, .72);
border-radius: 999px;
color: var(--top-partner-bg);
font-size: 12px;
line-height: 1;
font-weight: 900;
}
.top-partner-card__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 54px;
margin-top: auto;
padding: 14px 20px;
border: 2px solid var(--top-partner-bg);
border-radius: 4px;
background: transparent;
color: var(--top-partner-bg);
text-decoration: none;
font-size: 15px;
line-height: 1;
font-weight: 950;
letter-spacing: .12em;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.top-partner-card__button:hover {
background: var(--top-partner-bg);
color: var(--top-partner-cream);
transform: translateY(-2px);
}
.top-partner-arrow {
position: absolute;
top: 47%;
z-index: 4;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border: 2px solid var(--top-partner-cream);
border-radius: 50%;
background: rgba(156, 169, 91, .72);
color: var(--top-partner-cream);
font-size: 22px;
font-weight: 950;
cursor: pointer;
transform: translateY(-50%);
transition: transform .18s ease, background .18s ease;
}
.top-partner-arrow:hover {
background: var(--top-partner-orange);
transform: translateY(-50%) scale(1.05);
}
.top-partner-arrow--prev {
left: -18px;
}
.top-partner-arrow--next {
right: -18px;
}
.top-partner-slider.is-static .top-partner-arrow {
display: none;
}
.top-partner-controls {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.top-partner-dots {
display: flex;
align-items: center;
gap: 8px;
}
.top-partner-dot {
display: block;
width: 10px;
height: 10px;
border: 1px solid var(--top-partner-cream);
border-radius: 50%;
opacity: .62;
}
.top-partner-dot.is-active {
background: var(--top-partner-cream);
opacity: 1;
}
.top-partner-scroll-hint {
color: var(--top-partner-cream);
font-size: 12px;
line-height: 1;
font-weight: 950;
letter-spacing: .18em;
opacity: .8;
}
.top-partner-slider.is-static .top-partner-scroll-hint {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.top-partner-piece,
.top-partner-card,
.top-partner-card__image img {
animation: none !important;
transition: none !important;
}
}
@media (max-width: 1180px) {
.top-partner-track {
grid-auto-columns: calc((100% - 24px) / 2) !important;
overflow-x: auto !important;
}
.top-partner-slider.is-static .top-partner-track {
overflow-x: auto !important;
}
.top-partner-slider.is-static .top-partner-arrow,
.top-partner-arrow {
display: grid;
}
}
@media (max-width: 760px) {
.top-partner-section {
padding: 72px 0 88px !important;
}
.top-partner-inner {
width: 100% !important;
}
.top-partner-header {
width: min(100% - 32px, 520px) !important;
}
.top-partner-title {
font-size: clamp(64px, 21vw, 110px) !important;
}
.top-partner-lead {
font-size: 14px !important;
line-height: 1.9 !important;
}
.top-partner-piece {
width: 180px;
height: 124px;
font-size: 28px;
opacity: .24;
}
.top-partner-piece--bria {
left: -76px;
top: 98px;
}
.top-partner-piece--partner {
right: -82px;
top: 164px;
}
.top-partner-track {
grid-auto-columns: min(82vw, 390px) !important;
gap: 18px !important;
padding: 8px 24px 18px !important;
}
.top-partner-card {
min-height: 560px;
}
.top-partner-card__image {
height: 220px;
}
.top-partner-card__body {
min-height: 330px;
padding: 26px 22px 24px;
}
.top-partner-arrow {
display: none !important;
}
.top-partner-controls {
margin-top: 16px;
}
}
/* ===== TOP PARTNER REDESIGN: mock alignment pass ===== */
.top-partner-section {
padding: clamp(62px, 6.2vw, 96px) 0 clamp(68px, 6.8vw, 104px) !important;
}
.top-partner-header {
margin-bottom: clamp(32px, 3.5vw, 54px) !important;
}
.top-partner-title {
font-size: clamp(86px, 11.2vw, 180px) !important;
line-height: .78 !important;
}
.top-partner-lead {
margin-top: clamp(22px, 2.2vw, 34px) !important;
gap: 5px !important;
font-size: clamp(18px, 1.35vw, 22px) !important;
line-height: 1.7 !important;
}
.top-partner-piece {
width: clamp(220px, 19vw, 330px) !important;
height: clamp(170px, 14vw, 240px) !important;
border: 0 !important;
border-radius: 12px !important;
background: rgba(243, 234, 216, .58) !important;
color: rgba(156, 169, 91, .86) !important;
font-size: clamp(30px, 2.8vw, 48px) !important;
opacity: .48 !important;
}
.top-partner-piece::before,
.top-partner-piece::after {
width: 64px !important;
height: 64px !important;
border: 0 !important;
background: rgba(243, 234, 216, .58) !important;
}
.top-partner-piece--bria {
left: clamp(70px, 7vw, 128px) !important;
top: clamp(86px, 8vw, 132px) !important;
}
.top-partner-piece--bria::before {
left: -34px !important;
}
.top-partner-piece--bria::after {
bottom: -34px !important;
}
.top-partner-piece--partner {
right: clamp(74px, 7.4vw, 138px) !important;
top: clamp(92px, 8.5vw, 142px) !important;
}
.top-partner-piece--partner::before {
left: -34px !important;
background: var(--top-partner-bg) !important;
}
.top-partner-piece--partner::after {
right: -34px !important;
}
.top-partner-piece--partner {
box-shadow: 0 -32px 0 -2px rgba(243, 234, 216, .58) !important;
}
.top-partner-track {
grid-auto-columns: calc((100% - 36px) / 3) !important;
gap: 18px !important;
padding: 8px 0 12px !important;
}
.top-partner-card {
min-height: 520px !important;
border-radius: 8px !important;
box-shadow: 0 18px 48px rgba(35, 25, 22, .12) !important;
}
.top-partner-card__number {
left: 20px !important;
right: auto !important;
top: 22px !important;
color: rgba(156, 169, 91, .28) !important;
font-size: clamp(72px, 6.4vw, 104px) !important;
letter-spacing: -.06em !important;
}
.top-partner-card__image {
width: calc(100% - 122px) !important;
height: 185px !important;
margin: 38px 22px 0 auto !important;
border-radius: 4px !important;
}
.top-partner-card__image img {
border-radius: 4px !important;
}
.top-partner-card[data-partner-id="ujigami"] .top-partner-card__image img {
padding: 24px !important;
}
.top-partner-card__category {
left: 10px !important;
top: -18px !important;
padding: 8px 16px 9px !important;
border-radius: 6px !important;
font-size: 13px !important;
}
.top-partner-card__body {
min-height: 287px !important;
padding: 20px 28px 26px !important;
}
.top-partner-card__body h3 {
margin-bottom: 12px !important;
font-size: clamp(28px, 2.25vw, 38px) !important;
line-height: 1.12 !important;
}
.top-partner-card__body p {
font-size: clamp(14px, 1vw, 16px) !important;
line-height: 1.85 !important;
}
.top-partner-card__tags {
gap: 8px !important;
margin-top: 18px !important;
}
.top-partner-card__tags li {
min-width: 58px !important;
padding: 7px 12px 8px !important;
border-radius: 5px !important;
text-align: center !important;
}
.top-partner-card__button {
min-height: 52px !important;
margin-top: auto !important;
border-radius: 5px !important;
font-size: 16px !important;
}
.top-partner-slider.is-static .top-partner-controls {
display: none !important;
}
@media (max-width: 1180px) {
.top-partner-track {
grid-auto-columns: calc((100% - 24px) / 2) !important;
gap: 24px !important;
padding-inline: 24px !important;
}
.top-partner-slider.is-static .top-partner-controls {
display: flex !important;
}
}
@media (max-width: 760px) {
.top-partner-section {
padding-top: 72px !important;
}
.top-partner-piece--bria {
left: -76px !important;
top: 98px !important;
}
.top-partner-piece--partner {
right: -82px !important;
top: 164px !important;
}
.top-partner-track {
grid-auto-columns: min(82vw, 390px) !important;
gap: 18px !important;
}
.top-partner-card__image {
width: calc(100% - 104px) !important;
height: 180px !important;
margin-top: 34px !important;
}
.top-partner-card__number {
font-size: 74px !important;
}
}
/* ===== TOP PARTNER REDESIGN: card layout correction ===== */
.top-partner-inner {
width: min(100% - 96px, 1320px) !important;
}
.top-partner-track {
grid-auto-columns: calc((100% - 40px) / 3) !important;
gap: 20px !important;
}
.top-partner-card {
min-height: 570px !important;
padding-top: 0 !important;
}
.top-partner-card__number {
left: 22px !important;
top: 25px !important;
z-index: 1 !important;
font-size: clamp(80px, 6.8vw, 116px) !important;
line-height: .9 !important;
}
.top-partner-card__image {
width: calc(100% - 126px) !important;
height: 205px !important;
margin: 48px 22px 0 auto !important;
overflow: visible !important;
background: transparent !important;
}
.top-partner-card__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 4px !important;
}
.top-partner-card[data-partner-id="ujigami"] .top-partner-card__image {
background: var(--top-partner-cream) !important;
}
.top-partner-card[data-partner-id="ujigami"] .top-partner-card__image img {
object-fit: contain !important;
padding: 28px !important;
background: rgba(255, 255, 255, .42) !important;
}
.top-partner-card__category {
left: 0 !important;
top: -18px !important;
z-index: 3 !important;
}
.top-partner-card__body {
min-height: 310px !important;
padding: 18px 26px 26px !important;
}
.top-partner-card__body h3 {
margin-bottom: 10px !important;
font-size: clamp(27px, 2.15vw, 36px) !important;
}
.top-partner-card__body p {
min-height: 88px !important;
font-size: clamp(14px, .98vw, 16px) !important;
line-height: 1.85 !important;
}
.top-partner-card__tags {
margin-top: 14px !important;
}
.top-partner-card__button {
min-height: 52px !important;
margin-top: 20px !important;
}
.top-partner-slider.is-static .top-partner-controls,
.top-partner-slider.is-static .top-partner-dots,
.top-partner-slider.is-static .top-partner-scroll-hint {
display: none !important;
}
@media (max-width: 1180px) {
.top-partner-inner {
width: 100% !important;
}
.top-partner-track {
grid-auto-columns: calc((100% - 24px) / 2) !important;
gap: 24px !important;
padding-inline: 24px !important;
}
.top-partner-card__image {
width: calc(100% - 122px) !important;
}
}
@media (max-width: 760px) {
.top-partner-track {
grid-auto-columns: min(82vw, 390px) !important;
gap: 18px !important;
}
.top-partner-card {
min-height: 550px !important;
}
.top-partner-card__image {
width: calc(100% - 108px) !important;
height: 180px !important;
margin-top: 40px !important;
}
}
/* ===== TOP PARTNER REDESIGN: supplied puzzle assets + wider cards ===== */
.top-partner-inner {
width: min(100% - 72px, 1500px) !important;
}
.top-partner-piece {
display: block !important;
width: clamp(270px, 23vw, 410px) !important;
height: clamp(270px, 23vw, 410px) !important;
border: 0 !important;
background: center / contain no-repeat !important;
color: transparent !important;
opacity: .52 !important;
filter: none !important;
}
.top-partner-piece::before,
.top-partner-piece::after {
content: none !important;
}
.top-partner-piece--bria {
left: clamp(138px, 11vw, 220px) !important;
top: clamp(64px, 5.8vw, 100px) !important;
background-image: url("../images/partner/puzzle-briareus.png") !important;
}
.top-partner-piece--partner {
right: clamp(138px, 11vw, 220px) !important;
top: clamp(64px, 5.8vw, 100px) !important;
background-image: url("../images/partner/puzzle-partner.png") !important;
box-shadow: none !important;
}
.top-partner-track {
grid-auto-columns: calc((100% - 32px) / 3) !important;
gap: 16px !important;
}
.top-partner-card {
min-height: 585px !important;
overflow: visible !important;
}
.top-partner-card__number {
left: 50% !important;
top: -34px !important;
z-index: 4 !important;
transform: translateX(-50%) !important;
color: rgb(35, 25, 22) !important;
opacity: .16 !important;
font-size: clamp(76px, 6.2vw, 104px) !important;
}
.top-partner-card__image {
width: calc(100% - 48px) !important;
height: 230px !important;
margin: 48px auto 0 !important;
overflow: visible !important;
}
.top-partner-card__image img {
object-fit: cover !important;
}
.top-partner-card[data-partner-id="ujigami"] .top-partner-card__image img {
padding: 24px !important;
}
.top-partner-card__body {
min-height: 305px !important;
padding: 28px 30px 28px !important;
}
.top-partner-card__body h3 {
margin-bottom: 16px !important;
}
.top-partner-card__body p {
min-height: 82px !important;
}
.top-partner-card__tags {
margin-top: 18px !important;
}
@media (max-width: 1180px) {
.top-partner-inner {
width: 100% !important;
}
.top-partner-piece--bria {
left: 24px !important;
}
.top-partner-piece--partner {
right: 24px !important;
}
}
@media (max-width: 760px) {
.top-partner-piece {
width: 210px !important;
height: 210px !important;
opacity: .28 !important;
}
.top-partner-piece--bria {
left: -48px !important;
top: 96px !important;
}
.top-partner-piece--partner {
right: -48px !important;
top: 152px !important;
}
.top-partner-card__image {
width: calc(100% - 40px) !important;
height: 190px !important;
}
.top-partner-card__number {
top: -28px !important;
font-size: 72px !important;
}
}
/* ===== TOP PARTNER REDESIGN: card rhythm refinement ===== */
.top-partner-track {
align-items: stretch !important;
}
.top-partner-card {
min-height: 650px !important;
padding-top: 48px !important;
}
.top-partner-card__number {
top: -64px !important;
color: rgb(35, 25, 22) !important;
opacity: 1 !important;
font-size: clamp(80px, 6.5vw, 112px) !important;
line-height: .9 !important;
pointer-events: none !important;
}
.top-partner-card__image {
width: calc(100% - 44px) !important;
height: 236px !important;
margin-top: 36px !important;
}
.top-partner-card__body {
min-height: 335px !important;
padding: 34px 34px 34px !important;
}
.top-partner-card__body h3 {
margin-bottom: 18px !important;
}
.top-partner-card__body p {
min-height: 92px !important;
}
.top-partner-card__button {
justify-content: center !important;
width: min(230px, 72%) !important;
min-height: 48px !important;
margin: auto auto 0 !important;
padding: 13px 22px !important;
border-color: var(--top-partner-bg) !important;
background: var(--top-partner-bg) !important;
color: var(--top-partner-cream) !important;
text-align: center !important;
letter-spacing: .08em !important;
}
.top-partner-card__button span {
display: none !important;
}
.top-partner-card__button:hover {
background: var(--top-partner-orange) !important;
border-color: var(--top-partner-orange) !important;
color: var(--top-partner-cream) !important;
}
@media (max-width: 760px) {
.top-partner-card {
min-height: 620px !important;
padding-top: 40px !important;
}
.top-partner-card__number {
top: -46px !important;
font-size: 78px !important;
}
.top-partner-card__image {
margin-top: 28px !important;
}
.top-partner-card__body {
min-height: 320px !important;
padding: 30px 26px 30px !important;
}
}
/* ===== TOP PARTNER REDESIGN: outline numbers + calmer hover ===== */
.top-partner-slider {
margin-top: clamp(112px, 8.8vw, 150px) !important;
}
.top-partner-card {
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.top-partner-card:hover {
transform: translateY(-6px) !important;
}
.top-partner-card:hover .top-partner-card__image img {
transform: none !important;
}
.top-partner-card__number {
top: -76px !important;
color: transparent !important;
opacity: 1 !important;
-webkit-text-stroke: 2px rgb(35, 25, 22) !important;
text-stroke: 2px rgb(35, 25, 22) !important;
text-shadow: none !important;
font-size: clamp(82px, 6.5vw, 112px) !important;
}
.top-partner-card__image img {
transition: none !important;
}
.top-partner-card__body h3 {
margin-bottom: 12px !important;
}
.top-partner-card__tags {
margin: 0 0 20px !important;
}
.top-partner-card__body p {
min-height: 98px !important;
}
@media (max-width: 760px) {
.top-partner-slider {
margin-top: 88px !important;
}
.top-partner-card__number {
top: -54px !important;
-webkit-text-stroke-width: 1.5px !important;
text-stroke-width: 1.5px !important;
}
}
/* ==================== CONTACT CSS ==================== */
/* ===== SOURCE: briarfus_contact_section02/assets/css/contact.css ===== */
:root {
--contact-blue: #5188a3;
--contact-cream: #f3ead8;
--contact-black: #231916;
--contact-orange: #ec9f32;
--contact-red: #de5536;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--contact-blue);
color: var(--contact-cream);
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
.contact-section {
position: relative;
min-height: calc(100vh - 78px);
overflow: hidden;
background: var(--contact-blue);
padding: clamp(34px, 4vw, 70px) 0 clamp(48px, 5vw, 82px);
}
.contact-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .055;
background-image: radial-gradient(rgba(35,25,22,.35) .75px, transparent .75px);
background-size: 4px 4px;
mix-blend-mode: multiply;
}
.contact-section__inner {
position: relative;
z-index: 1;
width: min(100% - 32px, 980px);
margin: 0 auto;
text-align: center;
}
.contact-header__title {
margin: 0;
color: var(--contact-cream);
font-size: clamp(74px, 13vw, 185px);
line-height: .78;
letter-spacing: -.06em;
font-weight: 950;
}
.contact-notice {
margin: clamp(38px, 4vw, 66px) auto clamp(52px, 5vw, 88px);
display: grid;
gap: clamp(18px, 1.8vw, 28px);
color: var(--contact-cream);
font-size: clamp(14px, 1.35vw, 21px);
line-height: 1.65;
font-weight: 950;
letter-spacing: .04em;
}
.contact-notice p {
margin: 0;
}
.contact-notice__title {
font-size: clamp(16px, 1.5vw, 24px);
}
.contact-notice a {
color: var(--contact-orange);
text-decoration: none;
letter-spacing: .08em;
}
.contact-notice a:hover {
color: var(--contact-cream);
text-decoration: underline;
}
.contact-form {
width: min(100%, 680px);
margin: 0 auto;
display: grid;
gap: clamp(16px, 2vw, 28px);
}
.contact-form__field {
display: grid;
gap: clamp(7px, 0.8vw, 11px);
}
.contact-form__field label {
color: var(--contact-cream);
font-size: clamp(16px, 1.9vw, 26px);
line-height: 1;
font-weight: 950;
letter-spacing: .06em;
}
.contact-form__field input,
.contact-form__field textarea {
width: 100%;
border: 0;
border-radius: 12px;
background: var(--contact-cream);
color: var(--contact-black);
font: inherit;
font-size: clamp(13px, 1.1vw, 16px);
font-weight: 700;
padding: 0 1em;
outline: none;
box-shadow: none;
transition: box-shadow .16s ease, transform .16s ease;
}
.contact-form__field input {
height: clamp(44px, 3.8vw, 56px);
}
.contact-form__field textarea {
min-height: clamp(140px, 14vw, 200px);
resize: vertical;
padding-top: .9em;
padding-bottom: .9em;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
box-shadow: 0 0 0 4px rgba(236,159,50,.95);
transform: translateY(-1px);
}
.contact-form__privacy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
width: fit-content;
margin: 0 auto;
color: var(--contact-cream);
font-size: clamp(13px, 1.3vw, 18px);
line-height: 1.3;
font-weight: 950;
letter-spacing: .05em;
cursor: pointer;
}
.contact-form__privacy input {
width: 18px;
height: 18px;
accent-color: var(--contact-orange);
}
.contact-form__submit {
appearance: none;
border: none;
background: #ec9f32;
color: #f3ead8;
font-size: clamp(16px, 1.8vw, 24px);
font-weight: 950;
letter-spacing: 0.12em;
padding: 13px 36px;
border-radius: 10px;
cursor: pointer;
position: relative;
box-shadow: 0 6px 0 #231916;
transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
background: #de5536;
transform: translateY(-4px);
box-shadow: 0 10px 0 #231916;
}
.contact-form__submit:active {
transform: translateY(0);
box-shadow: 0 3px 0 #231916;
}
.contact-form__note {
min-height: 1.4em;
margin: -18px 0 0;
color: var(--contact-cream);
font-size: 14px;
font-weight: 800;
}
.site-footer {
display: grid;
place-items: center;
gap: 4px;
min-height: 78px;
padding: 14px 20px 16px;
background: var(--contact-black);
color: var(--contact-cream);
text-align: center;
font-size: clamp(14px, 1.45vw, 22px);
line-height: 1.2;
font-weight: 950;
letter-spacing: .04em;
}
.site-footer p {
margin: 0;
}
@media (max-width: 680px) {
.contact-section__inner {
width: min(100% - 28px, 560px);
}
.contact-header__title {
font-size: clamp(66px, 20vw, 104px);
}
.contact-notice br {
display: none;
}
.contact-form {
gap: 30px;
}
.contact-form__field label {
font-size: clamp(15px, 5vw, 22px);
}
.contact-form__privacy {
font-size: 16px;
}
}
/* ==================== INTEGRATION OVERRIDES ==================== */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
overflow-x: hidden;
}
#hero, #about, #portfolio, #partner, #contact {
scroll-margin-top: 96px;
}
/* Fixed global menu for meeting preview */
.global-fixed-nav {
position: fixed;
top: clamp(14px, 1.6vw, 24px);
right: clamp(14px, 2vw, 32px);
z-index: 9999;
display: flex;
align-items: center;
gap: clamp(8px, .9vw, 14px);
padding: 10px 14px;
border-radius: 999px;
background: rgba(35,25,22,.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.global-fixed-nav a {
color: #f3ead8;
text-decoration: none;
font-size: clamp(11px, .95vw, 15px);
font-weight: 900;
letter-spacing: .08em;
line-height: 1;
transition: color .16s ease, transform .16s ease;
}
.global-fixed-nav a:hover {
color: #ec9f32;
transform: translateY(-1px);
}
/* Prevent section-level body styles from affecting integrated page unexpectedly */
.integrated-page {
min-width: 320px;
}
/* Ensure contact footer remains full width */
.site-footer {
width: 100%;
}
/* ===== INTEGRATION FIX01 ===== */
/* 追加生成された固定ナビは使用しない */
.global-fixed-nav {
display: none !important;
}
/* HERO既存メニューをページ固定メニューとして優先 */
header,
.header,
.site-header,
.hero-header,
.hero__header,
.fv-header,
.nav,
.gnav {
z-index: 9998;
}
/* 各セクションのジャンプ位置をヘッダー分だけ調整 */
#hero,
#about,
#portfolio,
#partner,
#contact {
scroll-margin-top: 110px;
}
/* 統合時の横スクロール予防 */
html,
body {
overflow-x: hidden;
}
/* PORTFOLIOが統合時に下層へ潜らないよう補正 */
.portfolio-section {
position: relative;
z-index: 1;
}
.portfolio-list,
.portfolio-list-wrap,
.portfolio-tape {
pointer-events: auto;
}
/* ===== INTEGRATION FIX02: restore natural page scroll and scoped HERO chrome ===== */
:root {
--fixed-header-height: clamp(68px, 7vh, 92px);
}
html,
body {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.integrated-page {
background: var(--cream);
}
.integrated-page .site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10000 !important;
width: 100% !important;
height: var(--fixed-header-height) !important;
min-height: var(--fixed-header-height) !important;
padding: clamp(12px, 1.4vw, 22px) clamp(20px, 4vw, 64px) !important;
align-items: center !important;
background: var(--cream) !important;
}
.integrated-page .site-header__logo img,
.integrated-page .site-header img[src*="typo-logo"] {
height: clamp(34px, 4.6vh, 54px) !important;
width: auto !important;
}
.integrated-page .site-header__nav {
align-items: center !important;
padding-top: 0 !important;
gap: clamp(18px, 3.2vw, 56px) !important;
}
.integrated-page .hero-page {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 100svh !important;
padding-top: var(--fixed-header-height) !important;
overflow: hidden !important;
display: block !important;
}
.integrated-page .hero-visual {
width: 100% !important;
height: calc(100svh - var(--fixed-header-height) - var(--scroll-ratio)) !important;
min-height: 520px !important;
max-height: none !important;
margin-top: 0 !important;
}
.integrated-page .hero-page .hero-visual__vertical-title {
position: absolute !important;
top: calc(var(--fixed-header-height) + ((100svh - var(--fixed-header-height) - var(--scroll-ratio)) / 2)) !important;
right: clamp(18px, 3vw, 54px) !important;
z-index: 8 !important;
}
.integrated-page .hero-page .scroll-text {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 20 !important;
width: 100% !important;
height: var(--scroll-ratio) !important;
}
.integrated-page #top,
.integrated-page #about,
.integrated-page #portfolio,
.integrated-page #partner,
.integrated-page #contact {
scroll-margin-top: calc(var(--fixed-header-height) + 14px) !important;
}
/* ABOUT title symbol: keep the mark centered between A and BOUT. */
.integrated-page .about-intro__title-symbol img {
transform: none !important;
}
.integrated-page .about-intro__title-symbol {
transform: translate(8%, -15%) !important;
}
/* Portfolio overview text must stay readable on the cream detail panel. */
.integrated-page .portfolio-detail,
.integrated-page .portfolio-detail__body,
.integrated-page .portfolio-detail__description {
color: var(--black) !important;
-webkit-text-fill-color: var(--black) !important;
}
.integrated-page .portfolio-detail__description {
opacity: 1 !important;
visibility: visible !important;
}
/* Keep the project link label visible on the dark pill button. */
.integrated-page .portfolio-detail__link:not(.is-disabled):not(.is-hidden),
.integrated-page .portfolio-detail__link:not(.is-disabled):not(.is-hidden) span {
color: var(--cream) !important;
-webkit-text-fill-color: var(--cream) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Stabilize TV image switching: no scale, skew, or horizontal shake. */
.integrated-page .portfolio-tv__image {
backface-visibility: hidden !important;
transform: translateZ(0) !important;
transition: opacity .24s ease, filter .24s ease !important;
will-change: opacity, filter !important;
}
.integrated-page .portfolio-tv__image.is-switching,
.integrated-page .portfolio-tv__screen.is-dimming .portfolio-tv__image.is-switching {
animation: none !important;
transform: translateZ(0) !important;
opacity: .86 !important;
filter: brightness(1.06) contrast(1.03) saturate(.96) !important;
}
/* Keep the intended HERO ornament grid, but hide the duplicated loose pieces. */
.integrated-page .hero-visual__piece-grid {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
gap: clamp(3px, .28vw, 7px) !important;
place-items: center !important;
align-content: center !important;
justify-content: center !important;
width: min(38vw, 620px) !important;
height: min(38vw, 620px) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
visibility: visible !important;
opacity: 1 !important;
}
.integrated-page .hero-visual__piece-grid .hero-visual__piece {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
min-width: 0 !important;
min-height: 0 !important;
}
.integrated-page .hero-visual > .piece {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 900px) {
.integrated-page .hero-visual__piece-grid {
width: min(54vw, 500px) !important;
height: min(54vw, 500px) !important;
transform: translate(-50%, -50%) !important;
}
}
@media (max-width: 760px) {
.integrated-page .hero-visual__piece-grid {
width: 56vw !important;
height: 56vw !important;
left: 58% !important;
transform: translate(-50%, -50%) !important;
}
}
@media (max-width: 760px) {
:root {
--fixed-header-height: 82px;
}
.integrated-page .site-header {
flex-direction: column !important;
justify-content: center !important;
gap: 8px !important;
}
.integrated-page .site-header__nav {
gap: 14px !important;
font-size: 12px !important;
}
.integrated-page .hero-visual {
min-height: 520px !important;
}
}
/* =========================================================
RESPONSIVE FOUNDATION
Breakpoints: PC 1200px+, Tablet 768-1199px, Mobile <=767px
========================================================= */
:root {
--breakpoint-pc: 1200px;
--breakpoint-tablet: 768px;
--breakpoint-mobile: 767px;
--responsive-side-pad: clamp(20px, 5vw, 64px);
}
.integrated-page {
overflow-x: hidden !important;
}
.integrated-page img,
.integrated-page video,
.integrated-page canvas,
.integrated-page svg {
max-width: 100%;
}
@media (max-width: 1199px) {
body.integrated-page {
--fixed-header-height: clamp(74px, 8vh, 92px);
}
.integrated-page .site-header {
padding-inline: clamp(18px, 3.8vw, 44px) !important;
}
.integrated-page .site-header__logo {
width: clamp(220px, 30vw, 360px) !important;
}
.integrated-page .site-header__nav {
gap: clamp(18px, 2.7vw, 34px) !important;
font-size: clamp(16px, 2vw, 24px) !important;
}
.integrated-page .hero-visual {
min-height: 560px !important;
}
.integrated-page .hero-visual__copy {
left: clamp(120px, 15vw, 210px) !important;
font-size: clamp(42px, 5.4vw, 72px) !important;
}
.integrated-page .hero-visual__vertical-title {
font-size: clamp(54px, 7vw, 98px) !important;
}
.integrated-page .about-intro__stage {
min-height: auto !important;
padding: clamp(58px, 8vw, 92px) var(--responsive-side-pad) clamp(72px, 10vw, 120px) !important;
}
.integrated-page .about-intro__title {
font-size: clamp(72px, 14vw, 148px) !important;
}
.integrated-page .about-intro__copy {
font-size: clamp(14px, 1.8vw, 19px) !important;
}
.integrated-page .business-layout {
grid-template-columns: minmax(300px, 43%) 1fr !important;
padding-inline: var(--responsive-side-pad) !important;
}
.integrated-page .portfolio-section {
min-height: auto !important;
padding: clamp(72px, 9vw, 110px) 0 !important;
}
.integrated-page .portfolio-section__inner {
width: min(100% - 40px, 1080px) !important;
}
.integrated-page .portfolio-layout {
grid-template-columns: minmax(0, 1fr) !important;
gap: 34px !important;
}
.integrated-page .portfolio-main {
width: min(100%, 760px) !important;
margin-inline: auto !important;
}
.integrated-page .portfolio-tv {
width: min(100%, 760px) !important;
margin-inline: auto !important;
}
.integrated-page .portfolio-side {
width: min(100%, 820px) !important;
margin-inline: auto !important;
}
.integrated-page .portfolio-list-wrap {
max-height: 430px !important;
}
.integrated-page .message-section {
min-height: auto !important;
padding-block: clamp(84px, 11vw, 130px) !important;
}
.integrated-page .message-section__ornaments {
width: clamp(150px, 18vw, 240px) !important;
}
.integrated-page .top-partner-section {
min-height: auto !important;
padding: clamp(86px, 10vw, 128px) 0 clamp(92px, 11vw, 140px) !important;
}
.integrated-page .top-partner-inner {
width: min(100% - 44px, 1120px) !important;
}
.integrated-page .top-partner-title {
font-size: clamp(86px, 15vw, 160px) !important;
}
.integrated-page .top-partner-piece {
width: clamp(210px, 25vw, 320px) !important;
height: clamp(210px, 25vw, 320px) !important;
opacity: .36 !important;
}
.integrated-page .top-partner-piece--bria {
left: clamp(24px, 4vw, 68px) !important;
}
.integrated-page .top-partner-piece--partner {
right: clamp(24px, 4vw, 68px) !important;
}
.integrated-page .top-partner-slider {
margin-top: clamp(86px, 10vw, 116px) !important;
}
.integrated-page .top-partner-track {
grid-auto-columns: calc((100% - 18px) / 2) !important;
gap: 18px !important;
overflow-x: auto !important;
}
.integrated-page .top-partner-slider.is-static .top-partner-track {
overflow-x: auto !important;
}
.integrated-page .top-partner-slider.is-static .top-partner-controls {
display: none !important;
}
.integrated-page .contact-section {
min-height: auto !important;
padding-block: clamp(72px, 10vw, 120px) !important;
}
.integrated-page .contact-section__inner {
width: min(100% - 44px, 860px) !important;
}
.integrated-page .contact-header__title {
font-size: clamp(76px, 13vw, 140px) !important;
}
}
@media (max-width: 767px) {
body.integrated-page {
--fixed-header-height: 92px;
}
.integrated-page .site-header {
height: var(--fixed-header-height) !important;
min-height: var(--fixed-header-height) !important;
flex-direction: column !important;
justify-content: center !important;
gap: 10px !important;
padding: 12px 14px !important;
}
.integrated-page .site-header__logo {
width: min(78vw, 300px) !important;
}
.integrated-page .site-header__logo img {
height: auto !important;
width: 100% !important;
}
.integrated-page .site-header__nav {
width: 100% !important;
justify-content: center !important;
gap: clamp(12px, 4vw, 22px) !important;
font-size: clamp(12px, 3.5vw, 15px) !important;
line-height: 1 !important;
}
.integrated-page .site-header__nav a::after {
bottom: -5px !important;
height: 2px !important;
}
.integrated-page .hero-page {
min-height: 100svh !important;
}
.integrated-page .hero-visual {
height: calc(100svh - var(--fixed-header-height) - 38px) !important;
min-height: 540px !important;
}
.integrated-page .hero-visual__semicircle {
display: none !important;
}
.integrated-page .hero-visual__copy {
left: 50% !important;
top: 8% !important;
transform: translateX(-50%) !important;
font-size: clamp(22px, 5.5vw, 32px) !important;
line-height: 1.1 !important;
white-space: nowrap !important;
text-align: center !important;
}
.integrated-page .hero-visual__piece-grid {
width: min(58vw, 260px) !important;
height: min(58vw, 260px) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
opacity: .78 !important;
}
.integrated-page .hero-page .hero-visual__vertical-title {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
right: auto !important;
left: 50% !important;
top: auto !important;
bottom: 6% !important;
transform: translateX(-50%) !important;
font-size: clamp(36px, 9vw, 52px) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.integrated-page .scroll-text {
height: 38px !important;
font-size: 18px !important;
}
.integrated-page .about-intro__stage {
padding: 54px 18px 86px !important;
}
.integrated-page .about-intro__title {
font-size: clamp(58px, 21vw, 92px) !important;
letter-spacing: -.06em !important;
}
.integrated-page .about-intro__title-symbol {
width: .76em !important;
height: .76em !important;
transform: translate(5%, -10%) !important;
}
.integrated-page .about-intro__copy {
margin-top: 28px !important;
/* Phase B(1.1.3) F-5: 13px 固定を撤去し fluid 補間へ。「小さめの前置き」の
階層は維持（floor 14 / ceil 15）。 */
font-size: clamp(14px, 3.6vw, 15px) !important;
line-height: 2 !important;
}
.integrated-page .about-intro__pieces {
opacity: .42 !important;
}
.integrated-page .about-piece {
width: clamp(28px, 10vw, 48px) !important;
}
.integrated-page .about-staff-list {
gap: 22px !important;
margin-top: 42px !important;
}
.integrated-page .about-staff-card {
width: min(38vw, 150px) !important;
}
.integrated-page .about-intro__big-logo,
.integrated-page .about-intro__parts {
opacity: .9 !important;
}
.integrated-page .business-copy {
padding-inline: 18px !important;
font-size: clamp(27px, 9vw, 46px) !important;
}
.integrated-page .business-layout {
grid-template-columns: 1fr !important;
gap: 34px !important;
padding: 0 18px 74px !important;
}
.integrated-page .business-visual {
width: min(82vw, 360px) !important;
}
.integrated-page .business-item {
grid-template-columns: 68px 1fr !important;
gap: 14px !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(18px, 5.2vw, 24px) !important;
}
.integrated-page .portfolio-section {
padding: 60px 0 72px !important;
}
.integrated-page .portfolio-section__inner {
width: min(100% - 28px, 560px) !important;
}
.integrated-page .portfolio-header__title {
font-size: clamp(58px, 18vw, 92px) !important;
}
.integrated-page .portfolio-layout {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.integrated-page .portfolio-main,
.integrated-page .portfolio-tv {
width: 100% !important;
}
.integrated-page .portfolio-tv__screen {
width: 70% !important;
height: 58% !important;
left: 9% !important;
top: 14% !important;
}
.integrated-page .portfolio-detail {
margin-top: 14px !important;
}
.integrated-page .portfolio-detail__body {
min-height: 190px !important;
padding: 24px 22px !important;
}
.integrated-page .portfolio-detail__description {
font-size: 14px !important;
line-height: 1.8 !important;
}
.integrated-page .portfolio-detail__link {
width: min(100%, 190px) !important;
min-height: 42px !important;
margin-left: auto !important;
}
.integrated-page .portfolio-list-wrap {
max-height: 360px !important;
}
.integrated-page .portfolio-tape {
min-height: 88px !important;
}
.integrated-page .portfolio-tape__reel {
width: 72px !important;
}
.integrated-page .portfolio-tape__body {
padding: 12px 14px !important;
}
.integrated-page .portfolio-tape__client,
.integrated-page .portfolio-tape__title {
font-size: clamp(15px, 4.2vw, 18px) !important;
}
.integrated-page .message-section {
padding: 72px 14px !important;
}
.integrated-page .message-section__ornaments {
display: none !important;
}
.integrated-page .message-section__body {
width: min(100%, 560px) !important;
}
.integrated-page .message-section__catch {
font-size: clamp(24px, 7.4vw, 38px) !important;
line-height: 1.55 !important;
}
.integrated-page .message-section__text {
font-size: clamp(14px, 4vw, 17px) !important;
/* Phase B2(1.1.4) MESSAGE 縦リズム: SP で各文が独立キャッチのように離れて
見える問題。実測の合成要因を分散して緩和（line-height 単独に依存しない）:
line-height 2 → 1.7（行内リーディング）／ grid gap 14px → 7px（文と文の間）。
PC（≥768px）のベース規則 line-height:1.38 / gap:clamp(14px,1.35vw,24px) は不変。 */
line-height: 1.7 !important;
gap: 7px !important;
}
/* Phase B2(1.1.4): 段落グループ間の追加マージン（base = clamp(30px,4.3vw,70px)）を
SP でのみ縮小。区切りは認識できるが「一続きの文章」として読める程度に。 */
.integrated-page .message-section__text p:nth-child(5),
.integrated-page .message-section__text p:nth-child(10),
.integrated-page .message-section__text p:nth-child(13) {
margin-top: 12px !important;
}
.integrated-page .top-partner-section {
padding: 72px 0 86px !important;
}
.integrated-page .top-partner-inner {
width: min(100% - 28px, 520px) !important;
}
.integrated-page .top-partner-title {
font-size: clamp(64px, 18vw, 92px) !important;
}
.integrated-page .top-partner-lead {
margin-top: 22px !important;
font-size: 14px !important;
line-height: 1.95 !important;
}
.integrated-page .top-partner-piece {
width: 170px !important;
height: 170px !important;
opacity: .22 !important;
}
.integrated-page .top-partner-piece--bria {
left: -54px !important;
top: 92px !important;
}
.integrated-page .top-partner-piece--partner {
right: -54px !important;
top: 138px !important;
}
.integrated-page .top-partner-slider {
margin-top: 74px !important;
}
.integrated-page .top-partner-track {
grid-auto-columns: min(82vw, 360px) !important;
gap: 18px !important;
padding: 0 8px 12px !important;
scroll-padding-left: 8px !important;
}
.integrated-page .top-partner-card {
min-height: 610px !important;
}
.integrated-page .top-partner-card__number {
top: -48px !important;
font-size: 76px !important;
}
.integrated-page .top-partner-card__image {
height: 190px !important;
width: calc(100% - 34px) !important;
}
.integrated-page .top-partner-card__body {
min-height: 320px !important;
padding: 28px 24px !important;
}
.integrated-page .top-partner-card__body h3 {
font-size: clamp(25px, 7.8vw, 32px) !important;
}
.integrated-page .top-partner-card__button {
width: min(220px, 76%) !important;
}
.integrated-page .contact-section {
padding: 58px 0 72px !important;
}
.integrated-page .contact-section__inner {
width: min(100% - 28px, 520px) !important;
}
.integrated-page .contact-header__title {
font-size: clamp(58px, 18vw, 92px) !important;
}
.integrated-page .contact-notice {
font-size: 13px !important;
line-height: 1.75 !important;
}
.integrated-page .contact-notice br {
display: none !important;
}
.integrated-page .contact-form {
gap: 22px !important;
}
.integrated-page .contact-form__field label {
font-size: clamp(22px, 6.2vw, 32px) !important;
}
.integrated-page .contact-form__field input,
.integrated-page .contact-form__field textarea {
width: 100% !important;
min-height: 54px !important;
font-size: 16px !important;
}
.integrated-page .contact-form__field textarea {
min-height: 180px !important;
}
.integrated-page .contact-form__privacy {
justify-content: center !important;
font-size: 16px !important;
}
.integrated-page .contact-form__submit {
width: 100% !important;
min-height: 64px !important;
font-size: clamp(28px, 8vw, 42px) !important;
}
.integrated-page .site-footer {
min-height: 68px !important;
padding: 14px 18px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.integrated-page *,
.integrated-page *::before,
.integrated-page *::after {
scroll-behavior: auto !important;
}
}
/* ===== SP requested refinements: header, section balance, and card fit ===== */
.site-header__menu-toggle {
display: none;
}
@media (max-width: 767px) {
body.integrated-page {
--fixed-header-height: 72px;
}
.integrated-page .site-header {
height: var(--fixed-header-height) !important;
min-height: var(--fixed-header-height) !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
}
.integrated-page .site-header__logo {
width: min(61vw, 245px) !important;
flex: 0 1 auto !important;
}
.integrated-page .site-header__logo img {
width: 100% !important;
height: auto !important;
}
.integrated-page .site-header__menu-toggle {
display: inline-flex !important;
position: relative;
z-index: 12;
width: 42px;
height: 42px;
flex: 0 0 42px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 2px solid var(--orange);
border-radius: 0;
background: transparent;
color: var(--orange);
cursor: pointer;
}
.integrated-page .site-header__menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
transition: transform .22s ease, opacity .22s ease;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(2) {
opacity: 0;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.integrated-page .site-header__nav {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
z-index: 10 !important;
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
gap: 0 !important;
padding: 8px 16px 16px !important;
background: var(--cream) !important;
border-top: 1px solid rgba(222, 85, 54, .18) !important;
box-shadow: 0 18px 26px rgba(35, 25, 22, .1) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
}
.integrated-page .site-header.is-menu-open .site-header__nav {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
.integrated-page .site-header__nav a {
display: block !important;
padding: 13px 4px !important;
text-align: right !important;
font-size: 17px !important;
}
.integrated-page .site-header__nav a::after {
display: none !important;
}
.integrated-page .hero-visual__piece-grid {
left: 50% !important;
top: 50% !important;
width: min(62vw, 250px) !important;
height: min(62vw, 250px) !important;
transform: translate(-50%, -50%) !important;
opacity: .86 !important;
}
.integrated-page .hero-visual__piece-grid .hero-visual__piece {
min-width: 0 !important;
min-height: 0 !important;
}
.integrated-page .hero-visual__semicircle {
left: -62px !important;
width: 148px !important;
height: 148px !important;
overflow: visible !important;
}
.integrated-page .hero-visual__symbol {
right: 18px !important;
width: 66px !important;
height: 66px !important;
}
.integrated-page .about-block--intro,
.integrated-page .about-intro__stage {
min-height: auto !important;
}
.integrated-page .about-intro__stage {
padding-bottom: 0 !important;
}
.integrated-page .about-intro__big-logo {
position: relative !important;
left: 50% !important;
bottom: auto !important;
width: 124vw !important;
margin-top: 18px !important;
transform: translateX(-50%) rotate(5deg) !important;
}
.integrated-page .about-intro__big-logo.is-visible {
transform: translateX(-50%) rotate(5deg) !important;
}
.integrated-page .about-intro__big-logo strong {
margin-bottom: -.08em !important;
}
.integrated-page .about-block--business {
margin-top: 0 !important;
}
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(74vw, 330px) !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(18px, 0) scale(1.025) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(36px, 0) scale(1.05) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(54px, 0) scale(1.075) !important;
}
.integrated-page .business-item {
grid-template-columns: 54px 1fr !important;
gap: 16px !important;
align-items: center !important;
}
.integrated-page .business-item__line {
display: none !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text strong,
.integrated-page .business-item__text span {
text-align: left !important;
}
.integrated-page .message-section {
position: relative !important;
overflow: hidden !important;
}
.integrated-page .message-section__ornaments {
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
width: 86px !important;
opacity: .18 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.integrated-page .message-section__ornaments--left {
left: -34px !important;
}
.integrated-page .message-section__ornaments--right {
right: -34px !important;
}
.integrated-page .message-section__piece-grid {
display: grid !important;
grid-template-columns: repeat(2, 42px) !important;
grid-auto-rows: 42px !important;
gap: 4px !important;
min-height: 150% !important;
transform: none !important;
}
.integrated-page .top-partner-section {
min-height: auto !important;
padding: 68px 0 62px !important;
overflow: hidden !important;
}
.integrated-page .top-partner-piece {
width: 138px !important;
height: 138px !important;
opacity: .2 !important;
z-index: 0 !important;
}
.integrated-page .top-partner-piece--bria {
left: -24px !important;
top: 260px !important;
}
.integrated-page .top-partner-piece--partner {
right: -24px !important;
top: 285px !important;
}
.integrated-page .top-partner-slider {
margin-top: 48px !important;
}
.integrated-page .top-partner-track {
grid-auto-columns: min(78vw, 300px) !important;
gap: 16px !important;
padding: 46px 18px 10px !important;
scroll-padding-left: 18px !important;
}
.integrated-page .top-partner-card {
min-height: 468px !important;
padding-top: 28px !important;
}
.integrated-page .top-partner-card__number {
top: -42px !important;
font-size: 58px !important;
line-height: 1 !important;
}
.integrated-page .top-partner-card__image {
height: 136px !important;
width: calc(100% - 28px) !important;
margin-top: 0 !important;
}
.integrated-page .top-partner-card__category {
top: 8px !important;
left: 10px !important;
font-size: 10px !important;
}
.integrated-page .top-partner-card__body {
min-height: 244px !important;
padding: 18px 18px 20px !important;
}
.integrated-page .top-partner-card__body h3 {
font-size: clamp(22px, 6.4vw, 27px) !important;
line-height: 1.1 !important;
}
.integrated-page .top-partner-card__tags {
gap: 6px !important;
margin: 10px 0 12px !important;
}
.integrated-page .top-partner-card__tags li {
font-size: 9px !important;
padding: 3px 7px !important;
}
.integrated-page .top-partner-card__body p {
font-size: 12px !important;
line-height: 1.65 !important;
}
.integrated-page .top-partner-card__button {
width: min(176px, 72%) !important;
min-height: 38px !important;
margin-top: 14px !important;
font-size: 12px !important;
}
.integrated-page .top-partner-scroll-hint {
font-size: 10px !important;
}
}
/* ===== SP refinements after visual review: preserve image ratios and tighten spacing ===== */
@media (max-width: 767px) {
.integrated-page .site-header__menu-toggle {
width: 38px !important;
height: 38px !important;
flex-basis: 38px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.integrated-page .site-header__menu-toggle span {
width: 27px !important;
height: 3px !important;
}
.integrated-page .hero-visual,
.integrated-page .hero-visual__slides,
.integrated-page .hero-visual__slide {
min-height: calc(100svh - var(--fixed-header-height)) !important;
}
.integrated-page .hero-visual__slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.integrated-page .about-intro__stage {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding-top: 34px !important;
}
.integrated-page .about-staff-list {
flex-wrap: wrap !important;
align-items: flex-end !important;
justify-content: center !important;
gap: 16px 24px !important;
margin-top: 24px !important;
}
.integrated-page .about-staff-card {
width: min(34vw, 132px) !important;
}
.integrated-page .about-intro__big-logo,
.integrated-page .about-intro__parts {
align-self: center !important;
width: 113vw !important;
margin-top: -6px !important;
margin-bottom: 0 !important;
}
.integrated-page .about-intro__big-logo strong {
line-height: .72 !important;
margin-bottom: -.02em !important;
}
.integrated-page .about-intro__big-logo span {
margin-bottom: -.3em !important;
}
.integrated-page .about-block--business {
margin-top: 0 !important;
}
.integrated-page .business-copy {
padding-top: 28px !important;
}
.integrated-page .business-layout {
gap: 18px !important;
padding: 0 14px 54px !important;
}
.integrated-page .business-visual {
width: min(86vw, 344px) !important;
margin-inline: auto !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
transform-origin: center center !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(12px, 0) scale(1.018) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(24px, 0) scale(1.036) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(36px, 0) scale(1.054) !important;
}
.integrated-page .business-list {
gap: 12px !important;
width: min(100%, 320px) !important;
margin: 0 auto !important;
}
.integrated-page .business-item {
grid-template-columns: 42px 1fr !important;
gap: 10px !important;
justify-items: start !important;
}
.integrated-page .business-item__icon {
width: 36px !important;
max-width: 36px !important;
justify-self: center !important;
}
.integrated-page .business-item__text {
justify-self: start !important;
width: 100% !important;
text-align: left !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(16px, 4.5vw, 20px) !important;
line-height: 1.25 !important;
}
.integrated-page .message-section__ornaments {
width: 78px !important;
}
.integrated-page .message-section__ornaments--left {
left: -24px !important;
}
.integrated-page .message-section__ornaments--right {
right: -24px !important;
}
.integrated-page .message-section__piece-grid {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: center !important;
transform: none !important;
}
.integrated-page .message-piece {
width: 64px !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
transform: none !important;
}
.integrated-page .message-piece img {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
}
/* ===== SP final polish: header icon, ABOUT contact, business spacing, message ratio ===== */
@media (max-width: 767px) {
.integrated-page .site-header__menu-toggle {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
}
.integrated-page .site-header__menu-toggle span {
width: 28px !important;
height: 3px !important;
border-radius: 999px !important;
}
.integrated-page .hero-visual,
.integrated-page .hero-visual__slides,
.integrated-page .hero-visual__slide {
height: calc(100svh - var(--fixed-header-height)) !important;
min-height: calc(100svh - var(--fixed-header-height)) !important;
}
.integrated-page .about-intro__stage {
padding-bottom: 0 !important;
}
.integrated-page .about-staff-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px 22px !important;
margin-bottom: 0 !important;
}
.integrated-page .about-intro__parts {
position: relative !important;
left: 50% !important;
bottom: auto !important;
display: block !important;
width: 124vw !important;
max-width: none !important;
margin: -2px 0 -1px !important;
transform: translateX(-50%) !important;
}
.integrated-page .about-intro__parts.is-visible {
transform: translateX(-50%) !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
object-fit: contain !important;
}
.integrated-page .about-block--business {
margin-top: -1px !important;
}
.integrated-page .business-layout {
gap: 14px !important;
}
.integrated-page .business-visual {
width: min(82vw, 330px) !important;
margin-inline: auto !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(11px, 0) scale(1.018) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(22px, 0) scale(1.036) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(33px, 0) scale(1.054) !important;
}
.integrated-page .business-list {
gap: 9px !important;
width: min(100%, 310px) !important;
}
.integrated-page .business-item {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 8px !important;
}
.integrated-page .business-item__icon {
width: 30px !important;
max-width: 30px !important;
}
.integrated-page .business-item__text {
text-align: left !important;
}
.integrated-page .message-section__piece-grid {
gap: 8px !important;
}
.integrated-page .message-piece {
display: block !important;
width: 62px !important;
height: auto !important;
max-width: none !important;
object-fit: contain !important;
}
}
/* ===== SP follow-up fixes: ABOUT logo alignment, business row balance, compact contact ===== */
@media (max-width: 767px) {
.integrated-page .about-intro__parts {
position: relative !important;
left: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 -1px !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
object-fit: contain !important;
}
.integrated-page .business-copy {
padding-top: 24px !important;
}
.integrated-page .business-layout {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin-top: 18px !important;
padding: 0 12px 44px !important;
}
.integrated-page .business-visual {
width: min(88vw, 330px) !important;
margin-inline: auto !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(8px, 0) scale(1.012) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(16px, 0) scale(1.024) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(24px, 0) scale(1.036) !important;
}
.integrated-page .business-list {
width: min(100%, 300px) !important;
gap: 7px !important;
margin: 0 auto !important;
}
.integrated-page .business-item {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 7px !important;
align-items: center !important;
justify-items: start !important;
}
.integrated-page .business-item__line {
display: none !important;
}
.integrated-page .business-item__icon {
width: 26px !important;
max-width: 26px !important;
height: auto !important;
justify-self: center !important;
}
.integrated-page .business-item__text {
justify-self: start !important;
width: 100% !important;
padding: 0 !important;
text-align: left !important;
transform: none !important;
}
.integrated-page .business-item:hover .business-item__text,
.integrated-page .business-item.is-active .business-item__text {
transform: none !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
display: block !important;
text-align: left !important;
}
.integrated-page .business-item__text span {
margin-bottom: 2px !important;
font-size: 10px !important;
line-height: 1.05 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.1vw, 18px) !important;
line-height: 1.18 !important;
}
.integrated-page .contact-section {
padding: 30px 0 42px !important;
}
.integrated-page .contact-section__inner {
width: min(100% - 34px, 360px) !important;
}
.integrated-page .contact-form {
gap: 12px !important;
}
.integrated-page .contact-form__field label {
margin-bottom: 6px !important;
font-size: clamp(20px, 5.8vw, 27px) !important;
line-height: 1.15 !important;
}
.integrated-page .contact-form__field input,
.integrated-page .contact-form__field textarea {
min-height: 0 !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 16px !important;
}
.integrated-page .contact-form__field input {
height: 46px !important;
}
.integrated-page .contact-form__field textarea {
height: 122px !important;
}
.integrated-page .contact-form__privacy {
margin-top: 4px !important;
font-size: 15px !important;
}
.integrated-page .contact-form__submit {
width: min(100%, 270px) !important;
height: 54px !important;
min-height: 54px !important;
margin-top: 12px !important;
font-size: 28px !important;
border-radius: 10px !important;
}
}
/* ===== SP fine tuning v13: full-width ABOUT logo, business alignment, smaller contact ===== */
@media (max-width: 767px) {
.integrated-page .about-intro__parts {
position: relative !important;
left: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 0 -1px !important;
transform: translateX(-50%) !important;
opacity: 1 !important;
}
.integrated-page .about-intro__parts.is-visible {
transform: translateX(-50%) !important;
opacity: 1 !important;
}
.integrated-page .about-intro__parts img {
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
opacity: 1 !important;
object-fit: contain !important;
}
.integrated-page .business-layout {
width: min(100%, 350px) !important;
margin: 14px auto 0 !important;
padding: 0 0 38px !important;
gap: 6px !important;
justify-items: start !important;
}
.integrated-page .business-visual {
width: min(100%, 330px) !important;
margin: 0 auto !important;
transform: none !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
left: 0 !important;
right: auto !important;
width: 100% !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__border--blue {
transform: scale(1.018) !important;
}
.integrated-page .business-visual__border--green {
transform: scale(1.036) !important;
}
.integrated-page .business-visual__border--yellow {
transform: scale(1.054) !important;
}
.integrated-page .business-list {
width: min(100%, 330px) !important;
margin: 2px auto 0 !important;
gap: 4px !important;
}
.integrated-page .business-item {
grid-template-columns: 24px minmax(0, 1fr) !important;
gap: 5px !important;
align-items: center !important;
justify-items: start !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 22px !important;
max-width: 22px !important;
justify-self: start !important;
}
.integrated-page .business-item__text {
justify-self: start !important;
width: auto !important;
min-width: 0 !important;
text-align: left !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 9px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(13px, 3.8vw, 16px) !important;
line-height: 1.12 !important;
}
.integrated-page .contact-section {
padding: 22px 0 34px !important;
}
.integrated-page .contact-section__inner {
width: 100% !important;
max-width: 375px !important;
padding: 0 22px !important;
}
.integrated-page .contact-form {
width: 100% !important;
max-width: 290px !important;
margin: 0 auto !important;
gap: 9px !important;
}
.integrated-page .contact-form__field label {
margin-bottom: 5px !important;
font-size: clamp(17px, 5vw, 22px) !important;
}
.integrated-page .contact-form__field input,
.integrated-page .contact-form__field textarea {
border-radius: 9px !important;
padding: 8px 12px !important;
}
.integrated-page .contact-form__field input {
height: 36px !important;
}
.integrated-page .contact-form__field textarea {
height: 86px !important;
}
.integrated-page .contact-form__privacy {
justify-content: center !important;
margin-top: 2px !important;
font-size: 13px !important;
}
.integrated-page .contact-form__submit {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 190px !important;
height: 44px !important;
min-height: 44px !important;
margin: 8px auto 0 !important;
font-size: 23px !important;
border-radius: 9px !important;
}
}
/* ===== SP final override v15: keep the last word on menu, ABOUT, and Business ===== */
@media (max-width: 767px) {
.integrated-page .site-header__menu-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
flex: 0 0 38px !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--orange) !important;
}
.integrated-page .site-header__menu-toggle span {
position: absolute !important;
left: 50% !important;
top: 50% !important;
display: block !important;
width: 28px !important;
height: 3px !important;
margin: 0 !important;
border-radius: 999px !important;
background: currentColor !important;
transform-origin: center !important;
transition: transform .22s ease, opacity .18s ease !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(1) {
transform: translate(-50%, calc(-50% - 7px)) !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(2) {
opacity: 1 !important;
transform: translate(-50%, -50%) !important;
}
.integrated-page .site-header__menu-toggle span:nth-child(3) {
transform: translate(-50%, calc(-50% + 7px)) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(2) {
opacity: 0 !important;
transform: translate(-50%, -50%) scaleX(0) !important;
}
.integrated-page .site-header.is-menu-open .site-header__menu-toggle span:nth-child(3) {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.integrated-page .about-intro__stage {
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
}
.integrated-page .about-intro__parts {
position: relative !important;
left: calc(50% - 50vw) !important;
right: auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
margin: 0 0 -1px !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.integrated-page .business-layout {
display: grid !important;
grid-template-columns: 1fr !important;
width: min(100%, 340px) !important;
margin: 10px auto 0 !important;
padding: 0 0 38px !important;
gap: 0 !important;
justify-items: center !important;
align-items: start !important;
}
.integrated-page .business-visual {
position: relative !important;
width: min(100%, 318px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: 0 auto !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
transform-origin: 50% 50% !important;
}
.integrated-page .business-list {
display: grid !important;
width: min(100%, 318px) !important;
margin: -2px auto 0 !important;
padding: 0 0 0 18px !important;
gap: 4px !important;
justify-items: start !important;
}
.integrated-page .business-item {
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
width: 100% !important;
column-gap: 5px !important;
row-gap: 0 !important;
align-items: center !important;
justify-items: start !important;
text-align: left !important;
transform: none !important;
}
.integrated-page .business-item__line,
.integrated-page .business-item__line::after {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
.integrated-page .business-item__icon {
grid-column: 1 !important;
grid-row: 1 !important;
width: 21px !important;
max-width: 21px !important;
height: auto !important;
justify-self: start !important;
align-self: center !important;
}
.integrated-page .business-item__text {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
justify-self: start !important;
text-align: left !important;
opacity: 1 !important;
transform: none !important;
white-space: normal !important;
}
.integrated-page .business-item:hover .business-item__text,
.integrated-page .business-item.is-active .business-item__text {
transform: none !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
display: block !important;
width: 100% !important;
text-align: left !important;
}
.integrated-page .business-item__text span {
margin: 0 0 2px !important;
font-size: 9px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(13px, 3.7vw, 16px) !important;
line-height: 1.12 !important;
}
}
/* ===== SP final override v18: last-mile placement fixes at EOF ===== */
@media (max-width: 767px) {
.integrated-page .about-intro__parts {
position: relative !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100vw !important;
max-width: none !important;
margin-top: 0 !important;
margin-right: calc(50% - 50vw) !important;
margin-bottom: -1px !important;
margin-left: calc(50% - 50vw) !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center bottom !important;
}
.integrated-page .about-block--business,
.integrated-page .business-layout,
.integrated-page .business-visual {
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(100%, 320px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: 0 auto !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 330px) !important;
margin: 4px auto 0 !important;
padding-left: 20px !important;
gap: 5px !important;
}
.integrated-page .business-item {
grid-template-columns: 27px minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.integrated-page .business-item__icon {
width: 25px !important;
max-width: 25px !important;
}
.integrated-page .business-item__text span {
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(14px, 4.2vw, 18px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
opacity: .28 !important;
}
.integrated-page .top-partner-piece--bria {
top: 47% !important;
left: -8px !important;
}
.integrated-page .top-partner-piece--partner {
top: 48% !important;
right: -8px !important;
}
}
/* ===== SP final override v22: mobile partner/business/portfolio final at real EOF ===== */
@media (max-width: 767px) {
.integrated-page .business-layout {
margin-top: 2px !important;
}
.integrated-page .business-visual {
width: min(100%, 326px) !important;
aspect-ratio: 1 / 1.18 !important;
margin: -16px auto 0 !important;
transform: none !important;
opacity: 1 !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
position: absolute !important;
inset: 0 auto auto 0 !important;
width: 100% !important;
height: 100% !important;
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
transform-origin: left center !important;
}
.integrated-page .business-visual__frame {
z-index: 3 !important;
transform: scale(1) !important;
}
.integrated-page .business-visual__border--blue {
z-index: 2 !important;
transform: scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
z-index: 1 !important;
transform: scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
z-index: 0 !important;
transform: scale(1.125) !important;
}
.integrated-page .business-list {
width: min(100%, 346px) !important;
margin: -2px auto 0 !important;
padding-left: 18px !important;
gap: 6px !important;
}
.integrated-page .business-item {
grid-template-columns: 32px minmax(0, 1fr) !important;
column-gap: 7px !important;
text-align: left !important;
}
.integrated-page .business-item__icon {
width: 30px !important;
max-width: 30px !important;
}
.integrated-page .business-item__text,
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .business-item__text span {
font-size: 10.5px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(15px, 4.8vw, 20px) !important;
line-height: 1.14 !important;
}
.integrated-page .top-partner-piece {
width: clamp(118px, 46vw, 170px) !important;
opacity: .28 !important;
z-index: 1 !important;
}
.integrated-page .top-partner-piece--bria {
top: 40% !important;
left: -10px !important;
}
.integrated-page .top-partner-piece--partner {
top: 41% !important;
right: -10px !important;
}
.integrated-page .top-partner-card-track,
.integrated-page .top-partner-slider,
.integrated-page .top-partner-card {
position: relative !important;
z-index: 3 !important;
}
.integrated-page .portfolio-section {
overflow-x: hidden !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
position: relative !important;
z-index: 4 !important;
}
.integrated-page .portfolio-mobile__rail {
box-sizing: border-box !important;
max-width: 100vw !important;
overscroll-behavior-x: contain !important;
}
.integrated-page .portfolio-mobile-vhs {
touch-action: pan-x !important;
}
.portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
}
.portfolio-modal__panel {
overscroll-behavior: contain !important;
}
body.portfolio-modal-lock {
position: fixed !important;
width: 100% !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) {
.portfolio-mobile,
.portfolio-modal {
display: none !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 01
CSS-only skin update for PC horizontal tapes and SP cards.
========================================================= */
/* PCテープリスト カテゴリ色 — data-category セレクタ（WordPress移植対応）
カテゴリ追加時はここに1行追加するだけでOK */
.portfolio-list li[data-category="GRAPHIC"] { --portfolio-vhs-category: "GRAPHIC"; --portfolio-vhs-accent: #de5536; }
.portfolio-list li[data-category="BRANDING"] { --portfolio-vhs-category: "BRANDING"; --portfolio-vhs-accent: #231916; }
.portfolio-list li[data-category="WEB"] { --portfolio-vhs-category: "WEB"; --portfolio-vhs-accent: #ec9f32; }
.portfolio-list li[data-category="MOVIE"] { --portfolio-vhs-category: "MOVIE"; --portfolio-vhs-accent: #5188a3; }
.portfolio-list li[data-category="SNS"] { --portfolio-vhs-category: "SNS"; --portfolio-vhs-accent: #9ca95b; }
.portfolio-list li[data-category="MEDIA"] { --portfolio-vhs-category: "MEDIA"; --portfolio-vhs-accent: #95558d; }
.portfolio-tape {
grid-template-columns: clamp(82px, 6.4vw, 110px) 1fr !important;
min-height: clamp(94px, 8vw, 126px) !important;
padding: 5px !important;
border: 4px solid #16110f !important;
border-radius: 7px !important;
background:
linear-gradient(90deg, rgba(255,255,255,.06), transparent 18% 82%, rgba(255,255,255,.05)),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
#171412 !important;
color: #231916 !important;
box-shadow: 0 3px 0 #070605, 7px 7px 0 rgba(35, 25, 22, .35) !important;
}
.portfolio-tape:hover,
.portfolio-tape.is-active {
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 18% 82%, rgba(255,255,255,.06)),
repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
#111 !important;
color: #231916 !important;
transform: translateX(-8px) !important;
box-shadow: 0 3px 0 #070605, 9px 9px 0 rgba(35, 25, 22, .55) !important;
}
.portfolio-tape::before,
.portfolio-tape::after {
content: "";
position: absolute;
pointer-events: none;
}
.portfolio-tape::before {
inset: 9px auto 9px clamp(74px, 5.8vw, 102px);
width: 4px;
border-radius: 999px;
background: rgba(243, 234, 216, .22);
}
.portfolio-tape::after {
right: 10px;
bottom: 8px;
left: clamp(96px, 7.7vw, 132px);
height: 2px;
background: var(--portfolio-vhs-accent, var(--orange));
opacity: .72;
}
.portfolio-tape__reel {
margin: 0 !important;
border: 0 !important;
border-right: 4px solid #070605 !important;
border-radius: 3px 0 0 3px !important;
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 40%),
repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px),
#0d0d0c !important;
overflow: hidden !important;
}
.portfolio-tape__reel::before {
content: "BRIAREUS";
left: 7px !important;
top: auto !important;
bottom: 8px !important;
width: auto !important;
padding: 2px 4px !important;
border: 1px solid rgba(243, 234, 216, .72);
background: rgba(243, 234, 216, .08);
color: #f3ead8 !important;
font-size: 9px !important;
letter-spacing: .04em !important;
transform: none !important;
}
.portfolio-tape__reel::after {
width: clamp(42px, 3.9vw, 62px) !important;
height: clamp(42px, 3.9vw, 62px) !important;
border: 4px solid #5f5f5b !important;
background:
radial-gradient(circle, #eee 0 8%, #cfc8b8 9% 13%, transparent 14% 100%),
conic-gradient(from -18deg, #181818 0 18%, #aaa 18% 31%, #242424 31% 54%, #8d8d88 54% 67%, #161616 67% 100%) !important;
box-shadow:
inset 0 0 10px rgba(255,255,255,.18),
0 0 0 2px rgba(0,0,0,.55) !important;
}
.portfolio-tape__body {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
margin: 0 0 0 6px !important;
padding: clamp(10px, 1vw, 14px) clamp(18px, 1.7vw, 28px) clamp(13px, 1.1vw, 17px) !important;
border: 2px solid rgba(35, 25, 22, .78);
border-radius: 4px;
background:
linear-gradient(180deg, rgba(255,255,255,.42), transparent 42%),
#f3ead8 !important;
box-shadow: inset 0 0 16px rgba(35, 25, 22, .08);
}
.portfolio-tape__body::before {
content: var(--portfolio-vhs-category, "PORTFOLIO");
order: 1;
align-self: flex-start;
margin: 0 0 7px;
padding: 4px 9px 3px;
border-radius: 2px;
background: var(--portfolio-vhs-accent, var(--orange));
color: #f3ead8;
font-size: clamp(10px, .78vw, 13px);
font-weight: 950;
line-height: 1;
letter-spacing: .04em;
}
.portfolio-tape__date {
display: none !important;
}
.portfolio-tape__title {
order: 2;
display: block !important;
padding-right: 0 !important;
margin: 0 0 5px !important;
color: #231916 !important;
font-size: clamp(17px, 1.35vw, 25px) !important;
line-height: 1.14 !important;
font-weight: 950 !important;
}
.portfolio-tape__client {
order: 3;
display: block !important;
padding-right: 0 !important;
margin: 0 !important;
color: #231916 !important;
font-size: clamp(13px, 1vw, 17px) !important;
line-height: 1.1 !important;
font-weight: 950 !important;
}
/* モバイル・タブレットVHS カテゴリ色 — メディアクエリ外で常時適用 */
.portfolio-mobile-vhs[data-category="GRAPHIC"] { --portfolio-vhs-accent: #de5536; }
.portfolio-mobile-vhs[data-category="BRANDING"] { --portfolio-vhs-accent: #231916; }
.portfolio-mobile-vhs[data-category="WEB"] { --portfolio-vhs-accent: #ec9f32; }
.portfolio-mobile-vhs[data-category="MOVIE"] { --portfolio-vhs-accent: #5188a3; }
.portfolio-mobile-vhs[data-category="SNS"] { --portfolio-vhs-accent: #9ca95b; }
.portfolio-mobile-vhs[data-category="MEDIA"] { --portfolio-vhs-accent: #95558d; }
@media (max-width: 767px) {
.portfolio-mobile__tap {
width: 92px !important;
margin-bottom: 14px !important;
padding: 12px 0 10px !important;
border: 4px solid #231916 !important;
border-radius: 999px !important;
background: #f3ead8 !important;
box-shadow: 5px 5px 0 #231916 !important;
color: transparent !important;
font-size: 0 !important;
animation: portfolioTapFloat 2.3s ease-in-out infinite !important;
}
.portfolio-mobile__tap::before {
content: "VIEW";
color: #231916;
font-size: 24px;
font-weight: 950;
line-height: 1;
letter-spacing: .02em;
}
.portfolio-mobile__tap::after {
right: 16px !important;
bottom: -12px !important;
width: 18px !important;
height: 18px !important;
border-right: 4px solid #231916 !important;
border-bottom: 4px solid #231916 !important;
background: #f3ead8 !important;
}
.portfolio-mobile-vhs {
position: relative !important;
flex: 0 0 142px !important;
width: 142px !important;
min-height: 318px !important;
grid-template-rows: none !important;
padding: 0 !important;
border: 4px solid #070605 !important;
border-radius: 9px !important;
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 16% 84%, rgba(255,255,255,.06)),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
#111 !important;
box-shadow: 5px 6px 0 rgba(35, 25, 22, .72), inset 0 0 0 2px rgba(255,255,255,.05) !important;
overflow: hidden !important;
}
.portfolio-mobile-vhs::before,
.portfolio-mobile-vhs::after {
content: "";
position: absolute;
pointer-events: none;
}
.portfolio-mobile-vhs::before {
left: 43px;
right: 10px;
top: 84px;
bottom: 14px;
z-index: 1;
border: 2px solid rgba(35, 25, 22, .78);
border-radius: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,.48), transparent 35%),
#f3ead8;
box-shadow: inset 0 0 18px rgba(35, 25, 22, .1);
}
.portfolio-mobile-vhs::after {
top: 17px;
left: 50%;
z-index: 2;
width: 56px;
height: 56px;
border: 4px solid #63635f;
border-radius: 50%;
background:
radial-gradient(circle, #efe6d4 0 8%, #cfc8b8 9% 13%, transparent 14% 100%),
conic-gradient(from -18deg, #181818 0 18%, #aaa 18% 31%, #242424 31% 54%, #8d8d88 54% 67%, #161616 67% 100%);
box-shadow:
inset 0 0 10px rgba(255,255,255,.18),
0 0 0 2px rgba(0,0,0,.55);
transform: translateX(-28%);
}
.portfolio-mobile-vhs__spine {
inset: 0 auto 0 0 !important;
z-index: 3 !important;
width: 34px !important;
border-right: 3px solid #070605;
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 60%),
repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px),
#0c0c0b !important;
}
.portfolio-mobile-vhs__spine::before {
content: "BRIAREUS VIDEO CASSETTE" !important;
top: 108px !important;
left: 50% !important;
width: auto !important;
height: auto !important;
padding: 5px 3px !important;
border: 1px solid rgba(35, 25, 22, .7) !important;
border-radius: 3px !important;
background: #f3ead8 !important;
color: #231916 !important;
font-size: 8px !important;
font-weight: 950 !important;
line-height: 1 !important;
letter-spacing: .03em !important;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: translateX(-50%) !important;
}
.portfolio-mobile-vhs__spine::after {
content: "VHS";
position: absolute;
left: 50%;
bottom: 14px;
padding: 1px 2px;
border: 1px solid rgba(243, 234, 216, .82);
color: #f3ead8;
font-size: 10px;
font-weight: 950;
line-height: 1;
transform: translateX(-50%);
}
.portfolio-mobile-vhs__meta,
.portfolio-mobile-vhs__title,
.portfolio-mobile-vhs__client {
position: relative !important;
z-index: 4 !important;
}
.portfolio-mobile-vhs__meta {
position: absolute !important;
left: 45px !important;
right: 12px !important;
top: 86px !important;
display: block !important;
margin: 0 !important;
color: #f3ead8 !important;
font-size: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.portfolio-mobile-vhs__meta span:first-child {
display: block !important;
padding: 8px 4px 7px !important;
border-radius: 5px 5px 0 0;
background: var(--portfolio-vhs-accent, var(--orange)) !important;
color: #f3ead8 !important;
font-size: 10px !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: .02em !important;
}
.portfolio-mobile-vhs__meta span:last-child {
display: none !important;
}
.portfolio-mobile-vhs__title {
position: absolute !important;
top: 125px !important;
right: 27px !important;
bottom: 70px !important;
max-height: none !important;
margin: 0 !important;
overflow: hidden !important;
color: #231916 !important;
font-size: clamp(18px, 5.2vw, 21px) !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
.portfolio-mobile-vhs__title::after {
content: "";
display: block;
width: 2px;
height: 100%;
margin-right: 8px;
background: var(--portfolio-vhs-accent, var(--orange));
opacity: .82;
}
.portfolio-mobile-vhs__client {
position: absolute !important;
left: 51px !important;
right: 18px !important;
bottom: 29px !important;
margin: 0 !important;
color: #231916 !important;
font-size: 12px !important;
font-weight: 950 !important;
line-height: 1.18 !important;
text-align: center !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 02
SP correction: taller vertical tapes based on the PC tape finish.
========================================================= */
@media (max-width: 767px) {
.integrated-page .portfolio-mobile__rail {
align-items: flex-start !important;
gap: 16px !important;
padding-top: 8px !important;
padding-bottom: 18px !important;
}
.integrated-page .portfolio-mobile__tap {
width: 96px !important;
height: 52px !important;
margin: 0 auto 14px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
white-space: nowrap !important;
}
.integrated-page .portfolio-mobile__tap::before {
content: "VIEW" !important;
display: block !important;
color: #231916 !important;
font-size: 24px !important;
font-weight: 950 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
text-indent: 0 !important;
}
.integrated-page .portfolio-mobile__tap::after {
right: 20px !important;
bottom: -12px !important;
}
.integrated-page .portfolio-mobile-vhs {
flex: 0 0 138px !important;
width: 138px !important;
min-height: 354px !important;
height: 354px !important;
display: block !important;
padding: 0 !important;
border: 4px solid #070605 !important;
border-radius: 9px !important;
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 16% 84%, rgba(255,255,255,.06)),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
#111 !important;
box-shadow:
5px 6px 0 rgba(35, 25, 22, .72),
inset 0 0 0 2px rgba(255,255,255,.05) !important;
overflow: hidden !important;
}
.integrated-page .portfolio-mobile-vhs::before {
left: 44px !important;
right: 10px !important;
top: 104px !important;
bottom: 14px !important;
z-index: 1 !important;
border: 2px solid rgba(35, 25, 22, .82) !important;
border-radius: 6px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.46), transparent 36%),
#f3ead8 !important;
box-shadow: inset 0 0 18px rgba(35, 25, 22, .1) !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 20px !important;
left: 88px !important;
width: 58px !important;
height: 58px !important;
z-index: 2 !important;
transform: translateX(-50%) !important;
}
.integrated-page .portfolio-mobile-vhs__spine {
width: 34px !important;
z-index: 3 !important;
border-right: 4px solid #070605 !important;
}
.integrated-page .portfolio-mobile-vhs__spine::before {
top: 124px !important;
width: 18px !important;
min-height: 144px !important;
padding: 6px 2px !important;
display: grid !important;
place-items: center !important;
background: #f3ead8 !important;
color: #231916 !important;
font-size: 8px !important;
line-height: 1 !important;
}
.integrated-page .portfolio-mobile-vhs__spine::after {
bottom: 14px !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
position: absolute !important;
left: 46px !important;
right: 12px !important;
top: 106px !important;
z-index: 4 !important;
display: block !important;
margin: 0 !important;
color: #f3ead8 !important;
font-size: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:first-child {
display: block !important;
min-height: 30px !important;
padding: 7px 4px 6px !important;
border-radius: 4px 4px 0 0 !important;
background: var(--portfolio-vhs-accent, var(--orange)) !important;
color: #f3ead8 !important;
font-size: 9.5px !important;
font-weight: 950 !important;
line-height: 1.05 !important;
letter-spacing: .01em !important;
overflow: hidden !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:last-child {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs__title {
position: absolute !important;
top: 148px !important;
right: 25px !important;
bottom: 78px !important;
z-index: 4 !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
color: #231916 !important;
font-size: 18px !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
overflow: hidden !important;
}
.integrated-page .portfolio-mobile-vhs__title::after {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs__client {
position: absolute !important;
left: 50px !important;
right: 16px !important;
bottom: 30px !important;
z-index: 4 !important;
margin: 0 !important;
padding-top: 8px !important;
border-top: 2px solid var(--portfolio-vhs-accent, var(--orange)) !important;
color: #231916 !important;
font-size: 11px !important;
font-weight: 950 !important;
line-height: 1.18 !important;
text-align: center !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 03
SP refinements: remove VIEW bubble, extend tape labels, quiet modal controls.
========================================================= */
@media (max-width: 767px) {
.integrated-page .portfolio-mobile__tap {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
animation: none !important;
}
.integrated-page .portfolio-mobile__tap::before,
.integrated-page .portfolio-mobile__tap::after {
display: none !important;
content: none !important;
}
.integrated-page .portfolio-mobile__rail {
padding-top: 4px !important;
}
.integrated-page .portfolio-mobile-vhs {
min-height: 414px !important;
height: 414px !important;
}
.integrated-page .portfolio-mobile-vhs::before {
top: 82px !important;
bottom: 14px !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 18px !important;
left: 88px !important;
width: 42px !important;
height: 42px !important;
border-width: 3px !important;
}
.integrated-page .portfolio-mobile-vhs__spine::before {
display: none !important;
content: none !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
top: 84px !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:first-child {
min-height: 28px !important;
padding: 6px 4px 5px !important;
font-size: 9px !important;
}
.integrated-page .portfolio-mobile-vhs__title {
top: 122px !important;
bottom: 78px !important;
font-size: 18px !important;
}
.integrated-page .portfolio-mobile-vhs__client {
bottom: 30px !important;
}
.portfolio-modal__info {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.portfolio-modal__nav {
display: grid !important;
place-items: center !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #231916 !important;
font-size: 30px !important;
font-weight: 950 !important;
line-height: 1 !important;
}
.portfolio-modal__close {
display: grid !important;
place-items: center !important;
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 04
SP spacing, label extension, reel centering, and roomier modal.
========================================================= */
@media (max-width: 767px) {
.integrated-page .portfolio-section {
padding-top: 10px !important;
padding-bottom: 38px !important;
}
.integrated-page .portfolio-header {
margin-bottom: 4px !important;
}
.integrated-page .portfolio-header__title {
margin-top: 0 !important;
margin-bottom: 0 !important;
transform: translateY(-8px) !important;
}
.integrated-page .portfolio-mobile__rail {
padding-top: 0 !important;
padding-bottom: 34px !important;
}
.integrated-page .portfolio-mobile__hint {
margin-top: 10px !important;
transform: translateY(12px) !important;
}
.integrated-page .portfolio-mobile-vhs {
flex-basis: 132px !important;
width: 132px !important;
min-height: 456px !important;
height: 456px !important;
}
.integrated-page .portfolio-mobile-vhs__spine {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs::before {
left: 14px !important;
right: 14px !important;
top: 88px !important;
bottom: 16px !important;
border-radius: 7px !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 22px !important;
left: 50% !important;
width: 40px !important;
height: 40px !important;
border-width: 3px !important;
transform: translateX(-50%) !important;
background:
radial-gradient(circle, #efe6d4 0 9%, #cfc8b8 10% 14%, transparent 15% 100%),
conic-gradient(from -45deg, #181818 0 20%, #a9a9a4 20% 33%, #242424 33% 58%, #8d8d88 58% 70%, #161616 70% 100%) !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
left: 18px !important;
right: 18px !important;
top: 90px !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:first-child {
min-height: 30px !important;
padding: 7px 4px 6px !important;
display: grid !important;
place-items: center !important;
}
.integrated-page .portfolio-mobile-vhs__title {
top: 132px !important;
right: 50% !important;
bottom: 76px !important;
transform: translateX(50%) !important;
font-size: 18px !important;
line-height: 1.08 !important;
text-align: start !important;
}
.integrated-page .portfolio-mobile-vhs__client {
left: 22px !important;
right: 22px !important;
bottom: 30px !important;
}
.portfolio-modal__panel {
max-height: 94vh !important;
padding: 14px 14px 22px !important;
}
.portfolio-modal-tv {
margin-bottom: 18px !important;
}
.portfolio-modal__info {
min-height: 250px !important;
padding: 8px 0 18px !important;
}
.portfolio-modal__description {
margin-top: 14px !important;
line-height: 1.9 !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 05
Restore SP scroll hint, align category bands, and tune modal TV image.
========================================================= */
@media (max-width: 767px) {
.integrated-page .portfolio-mobile__hint {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 5 !important;
margin: 12px auto 0 !important;
transform: translateY(8px) !important;
color: rgba(35, 25, 22, .72) !important;
}
.integrated-page .portfolio-mobile-vhs::before {
left: 12px !important;
right: 12px !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
left: 14px !important;
right: 14px !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:first-child {
width: 100% !important;
box-sizing: border-box !important;
border-radius: 5px 5px 0 0 !important;
}
.integrated-page .portfolio-mobile-vhs__title {
right: 50% !important;
}
.integrated-page .portfolio-mobile-vhs__client {
left: 20px !important;
right: 20px !important;
}
.portfolio-modal-tv__screen {
top: 13.2% !important;
left: 8.4% !important;
width: 60.6% !important;
height: 68.6% !important;
border-radius: 9% / 13% !important;
}
.portfolio-modal-tv__image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 06
Keep SP title/scroll visible and refine modal TV screen crop.
========================================================= */
@media (max-width: 767px) {
.integrated-page .portfolio-section {
padding-top: 18px !important;
padding-bottom: 64px !important;
}
.integrated-page .portfolio-header {
margin-bottom: 8px !important;
}
.integrated-page .portfolio-header__title {
transform: none !important;
font-size: clamp(48px, 16vw, 68px) !important;
line-height: .9 !important;
}
.integrated-page .portfolio-mobile__rail {
padding-top: 2px !important;
padding-bottom: 10px !important;
}
.integrated-page .portfolio-mobile-vhs {
min-height: 430px !important;
height: 430px !important;
}
.integrated-page .portfolio-mobile-vhs::before {
bottom: 14px !important;
}
.integrated-page .portfolio-mobile-vhs__title {
bottom: 72px !important;
}
.integrated-page .portfolio-mobile__hint {
display: block !important;
margin-top: 4px !important;
transform: none !important;
}
.portfolio-modal-tv__screen {
top: 12.5% !important;
left: 7.4% !important;
width: 62.2% !important;
height: 70.5% !important;
border-radius: 10% / 14% !important;
}
.portfolio-modal-tv__image {
object-fit: cover !important;
object-position: center center !important;
transform: scale(1.02) !important;
}
}
/* =========================================================
PORTFOLIO VHS visual refresh 07
Match modal TV geometry to the actual TV-frame image ratio.
========================================================= */
@media (max-width: 767px) {
.portfolio-modal-tv {
aspect-ratio: 2183 / 1500 !important;
width: 100% !important;
max-width: 330px !important;
}
.portfolio-modal-tv__screen {
top: 8.8% !important;
left: 7.9% !important;
width: 64.7% !important;
height: 80% !important;
border-radius: 10% / 14% !important;
}
.portfolio-modal-tv__image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
}
/* =========================================================
PORTFOLIO PC detail/date and scroll arrow polish 01
========================================================= */
@media (min-width: 768px) {
.portfolio-detail__label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin-bottom: 14px !important;
color: #de5536 !important;
}
.portfolio-detail__label::after {
content: attr(data-date);
margin-left: 24px;
color: #de5536;
font-size: clamp(12px, .95vw, 15px);
font-weight: 950;
line-height: 1;
letter-spacing: .06em;
white-space: nowrap;
}
.portfolio-list-arrow {
color: #5b381f !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-webkit-text-fill-color: #5b381f !important;
opacity: .72 !important;
}
.portfolio-list-arrow::before,
.portfolio-list-arrow::after {
color: #5b381f !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
}
}
/* =========================================================
PORTFOLIO PC active label and overview color polish 02
========================================================= */
@media (min-width: 768px) {
.portfolio-detail__label,
.portfolio-detail__label::after {
color: #de5536 !important;
-webkit-text-fill-color: #de5536 !important;
}
.portfolio-tape.is-active .portfolio-tape__body {
background: #de5536 !important;
border-color: #231916 !important;
box-shadow: inset 0 0 16px rgba(35, 25, 22, .08);
}
.portfolio-tape.is-active .portfolio-tape__body::before {
background: #f3ead8 !important;
color: #de5536 !important;
-webkit-text-fill-color: #de5536 !important;
}
.portfolio-tape.is-active .portfolio-tape__title,
.portfolio-tape.is-active .portfolio-tape__client {
color: #f3ead8 !important;
-webkit-text-fill-color: #f3ead8 !important;
}
.portfolio-tape.is-active::after {
background: #f3ead8 !important;
opacity: .85 !important;
}
}
/* =========================================================
PORTFOLIO PC tape line and scroll arrow polish 03
========================================================= */
@media (min-width: 768px) {
.portfolio-tape::after,
.portfolio-tape.is-active::after {
display: none !important;
content: none !important;
}
.portfolio-list-arrow {
color: #5b381f !important;
-webkit-text-fill-color: #5b381f !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
background: transparent !important;
background-image: none !important;
text-shadow: none !important;
filter: none !important;
}
.portfolio-list-arrow--up,
.portfolio-list-arrow--down {
color: #5b381f !important;
-webkit-text-fill-color: #5b381f !important;
}
}
/* =========================================================
PORTFOLIO PC arrow mask and active tape clipping fix 04
========================================================= */
@media (min-width: 768px) {
.portfolio-list-wrap {
-webkit-mask-image: none !important;
mask-image: none !important;
}
.portfolio-list {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.portfolio-tape:hover,
.portfolio-tape.is-active {
transform: none !important;
}
.portfolio-list-arrow {
color: #5b381f !important;
-webkit-text-fill-color: #5b381f !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
isolation: isolate !important;
z-index: 20 !important;
}
}
/* =========================================================
TABLET layout polish 01
iPad portrait/landscape: keep PC desktop intact, tune tablet-only views.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .site-header {
height: var(--fixed-header-height) !important;
min-height: var(--fixed-header-height) !important;
}
.integrated-page .site-header__logo {
width: clamp(260px, 30vw, 340px) !important;
height: auto !important;
flex: 0 0 auto !important;
}
.integrated-page .site-header__logo img {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
aspect-ratio: auto !important;
}
.integrated-page .about-block--intro,
.integrated-page .about-intro__stage {
min-height: auto !important;
}
.integrated-page .about-intro__stage {
padding-bottom: 0 !important;
}
.integrated-page .about-intro__parts {
position: relative !important;
inset: auto !important;
width: min(100%, 920px) !important;
margin: clamp(18px, 3vw, 34px) auto -1px !important;
transform: none !important;
}
.integrated-page .about-intro__parts.is-visible {
transform: none !important;
}
.integrated-page .about-intro__parts img {
display: block !important;
width: 100% !important;
height: auto !important;
}
.integrated-page .about-block--business {
margin-top: 0 !important;
padding-top: clamp(28px, 5vw, 58px) !important;
overflow: hidden !important;
}
.integrated-page .business-layout {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
align-items: center !important;
gap: clamp(26px, 4vw, 46px) !important;
padding-inline: clamp(44px, 7vw, 76px) !important;
overflow: visible !important;
}
.integrated-page .business-visual {
width: min(38vw, 390px) !important;
margin-inline: auto !important;
transform: none !important;
overflow: visible !important;
}
.integrated-page .business-visual__frame,
.integrated-page .business-visual__border {
transform-origin: center center !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(-50%, -50%) scale(1.02) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(-50%, -50%) scale(1.055) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(-50%, -50%) scale(1.09) !important;
}
.integrated-page .portfolio-section {
padding: clamp(58px, 7vw, 82px) 0 clamp(76px, 8vw, 102px) !important;
}
.integrated-page .portfolio-section__inner {
width: min(100% - 56px, 760px) !important;
}
.integrated-page .portfolio-layout {
display: none !important;
}
.integrated-page .portfolio-mobile {
display: block !important;
width: 100% !important;
}
.integrated-page .portfolio-mobile__lead,
.integrated-page .portfolio-mobile__tap {
display: none !important;
}
.integrated-page .portfolio-mobile__rail {
display: flex !important;
align-items: flex-start !important;
gap: clamp(20px, 3vw, 28px) !important;
width: calc(100% + 56px) !important;
margin-left: -28px !important;
padding: 4px 28px 18px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
}
.integrated-page .portfolio-mobile__rail::-webkit-scrollbar {
height: 0 !important;
}
.integrated-page .portfolio-mobile__hint {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 8px !important;
color: rgba(35, 25, 22, .72) !important;
}
/* カテゴリ色 — data-index 旧ルールを data-category に移行 */
.integrated-page .portfolio-mobile-vhs[data-category="GRAPHIC"] { --portfolio-vhs-accent: #de5536; }
.integrated-page .portfolio-mobile-vhs[data-category="BRANDING"] { --portfolio-vhs-accent: #231916; }
.integrated-page .portfolio-mobile-vhs[data-category="WEB"] { --portfolio-vhs-accent: #ec9f32; }
.integrated-page .portfolio-mobile-vhs[data-category="MOVIE"] { --portfolio-vhs-accent: #5188a3; }
.integrated-page .portfolio-mobile-vhs[data-category="SNS"] { --portfolio-vhs-accent: #9ca95b; }
.integrated-page .portfolio-mobile-vhs[data-category="MEDIA"] { --portfolio-vhs-accent: #95558d; }
.integrated-page .portfolio-mobile-vhs {
position: relative !important;
display: block !important;
flex: 0 0 clamp(146px, 17vw, 172px) !important;
width: clamp(146px, 17vw, 172px) !important;
height: clamp(438px, 51vw, 488px) !important;
min-height: clamp(438px, 51vw, 488px) !important;
padding: 0 !important;
border: 4px solid #070605 !important;
border-radius: 10px !important;
background:
linear-gradient(90deg, rgba(255,255,255,.08), transparent 16% 84%, rgba(255,255,255,.06)),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
#111 !important;
box-shadow: 6px 7px 0 rgba(35, 25, 22, .72), inset 0 0 0 2px rgba(255,255,255,.05) !important;
overflow: hidden !important;
scroll-snap-align: start !important;
}
.integrated-page .portfolio-mobile-vhs::before,
.integrated-page .portfolio-mobile-vhs::after {
content: "";
position: absolute;
pointer-events: none;
}
.integrated-page .portfolio-mobile-vhs::before {
left: 14px !important;
right: 14px !important;
top: 92px !important;
bottom: 16px !important;
z-index: 1 !important;
border: 2px solid rgba(35, 25, 22, .82) !important;
border-radius: 7px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.46), transparent 36%),
#f3ead8 !important;
box-shadow: inset 0 0 18px rgba(35, 25, 22, .1) !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 24px !important;
left: 50% !important;
z-index: 2 !important;
width: 44px !important;
height: 44px !important;
border: 3px solid #63635f !important;
border-radius: 50% !important;
background:
radial-gradient(circle, #efe6d4 0 9%, #cfc8b8 10% 14%, transparent 15% 100%),
conic-gradient(from -45deg, #181818 0 20%, #a9a9a4 20% 33%, #242424 33% 58%, #8d8d88 58% 70%, #161616 70% 100%) !important;
box-shadow: inset 0 0 10px rgba(255,255,255,.18), 0 0 0 2px rgba(0,0,0,.55) !important;
transform: translateX(-50%) !important;
}
.integrated-page .portfolio-mobile-vhs__spine {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
position: absolute !important;
left: 14px !important;
right: 14px !important;
top: 94px !important;
z-index: 4 !important;
display: block !important;
margin: 0 !important;
color: #f3ead8 !important;
font-size: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:first-child {
display: grid !important;
place-items: center !important;
width: 100% !important;
min-height: 32px !important;
box-sizing: border-box !important;
padding: 7px 5px 6px !important;
border-radius: 5px 5px 0 0 !important;
background: var(--portfolio-vhs-accent, var(--orange)) !important;
color: #f3ead8 !important;
font-size: 10px !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: .01em !important;
}
.integrated-page .portfolio-mobile-vhs__meta span:last-child {
display: none !important;
}
.integrated-page .portfolio-mobile-vhs__title {
position: absolute !important;
top: 140px !important;
right: 50% !important;
bottom: 82px !important;
z-index: 4 !important;
width: auto !important;
margin: 0 !important;
overflow: hidden !important;
color: #231916 !important;
font-size: clamp(18px, 2.2vw, 21px) !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
text-align: start !important;
writing-mode: vertical-rl !important;
text-orientation: mixed !important;
transform: translateX(50%) !important;
}
.integrated-page .portfolio-mobile-vhs__title::after {
display: none !important;
content: none !important;
}
.integrated-page .portfolio-mobile-vhs__client {
position: absolute !important;
left: 22px !important;
right: 22px !important;
bottom: 30px !important;
z-index: 4 !important;
margin: 0 !important;
padding-top: 8px !important;
border-top: 2px solid var(--portfolio-vhs-accent, var(--orange)) !important;
color: #231916 !important;
font-size: 12px !important;
font-weight: 950 !important;
line-height: 1.18 !important;
text-align: center !important;
}
.integrated-page .portfolio-modal.is-open {
display: grid !important;
position: fixed !important;
inset: 0 !important;
z-index: 3000 !important;
place-items: center !important;
padding: 28px !important;
background: rgba(35, 25, 22, .72) !important;
}
.integrated-page .portfolio-modal__panel {
width: min(100%, 620px) !important;
max-height: min(92vh, 920px) !important;
overflow-y: auto !important;
padding: 22px 24px 30px !important;
border: 4px solid #231916 !important;
border-radius: 10px !important;
background: #f3ead8 !important;
}
.integrated-page .portfolio-modal__bar {
margin-bottom: 18px !important;
}
.integrated-page .portfolio-modal-tv {
width: min(100%, 380px) !important;
aspect-ratio: 2183 / 1500 !important;
margin: 0 auto 22px !important;
}
.integrated-page .portfolio-modal-tv__screen {
top: 8.8% !important;
left: 7.9% !important;
width: 64.7% !important;
height: 80% !important;
border-radius: 10% / 14% !important;
}
.integrated-page .portfolio-modal-tv__image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
.integrated-page .portfolio-modal__info {
min-height: 280px !important;
padding: 0 4px 12px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.integrated-page .top-partner-section {
padding-top: clamp(82px, 9vw, 118px) !important;
}
.integrated-page .top-partner-piece {
top: clamp(102px, 13vw, 152px) !important;
width: clamp(180px, 22vw, 260px) !important;
height: clamp(180px, 22vw, 260px) !important;
}
.integrated-page .top-partner-piece--bria {
left: clamp(10px, 3vw, 42px) !important;
}
.integrated-page .top-partner-piece--partner {
right: clamp(10px, 3vw, 42px) !important;
}
.integrated-page .top-partner-card {
overflow: visible !important;
padding-top: clamp(54px, 7vw, 76px) !important;
}
.integrated-page .top-partner-card__number {
top: clamp(-36px, -4vw, -22px) !important;
line-height: .82 !important;
}
.integrated-page .contact-section__inner {
width: min(100% - 56px, 860px) !important;
}
.integrated-page .contact-form {
width: min(60%, 620px) !important;
margin-inline: auto !important;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.integrated-page .business-layout {
grid-template-columns: 1fr !important;
}
.integrated-page .business-visual {
width: min(62vw, 410px) !important;
}
.integrated-page .business-list {
width: min(100%, 620px) !important;
margin-inline: auto !important;
}
}
/* =========================================================
TABLET layout polish 02
Follow-up: ABOUT width, business composition, portfolio height/modal, partner cards.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .about-intro__stage {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.integrated-page .about-intro__title,
.integrated-page .about-intro__copy,
.integrated-page .about-intro__pieces,
.integrated-page .about-staff-list {
width: min(100% - 56px, 920px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.integrated-page .about-intro__parts {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: -1px !important;
overflow: hidden !important;
}
.integrated-page .about-intro__parts img {
width: 100% !important;
max-width: none !important;
height: auto !important;
object-fit: contain !important;
}
.integrated-page .about-block--business {
min-height: 100svh !important;
padding-top: clamp(76px, 9vw, 118px) !important;
padding-bottom: clamp(76px, 9vw, 118px) !important;
}
.integrated-page .business-layout {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
min-height: min(840px, calc(100svh - var(--fixed-header-height))) !important;
padding: 0 clamp(42px, 6vw, 72px) !important;
}
.integrated-page .business-visual {
justify-self: start !important;
align-self: start !important;
width: min(66vw, 560px) !important;
margin: 0 !important;
transform: translate(-3%, -2%) !important;
}
.integrated-page .business-list {
justify-self: end !important;
align-self: end !important;
width: min(52vw, 430px) !important;
margin: clamp(280px, 35vw, 390px) 0 0 auto !important;
z-index: 5 !important;
}
.integrated-page .business-item {
grid-template-columns: clamp(44px, 5vw, 58px) clamp(54px, 7vw, 82px) minmax(0, 1fr) !important;
column-gap: clamp(10px, 1.5vw, 18px) !important;
}
.integrated-page .business-item__text {
text-align: left !important;
}
.integrated-page .business-item__text span,
.integrated-page .business-item__text strong {
text-align: left !important;
}
.integrated-page .portfolio-section {
min-height: 100svh !important;
padding-top: clamp(74px, 8vw, 98px) !important;
padding-bottom: clamp(86px, 9vw, 116px) !important;
}
.integrated-page .portfolio-section__inner {
width: min(100% - 48px, 860px) !important;
}
.integrated-page .portfolio-header {
margin-bottom: clamp(18px, 3vw, 34px) !important;
}
.integrated-page .portfolio-header__title {
font-size: clamp(110px, 17vw, 168px) !important;
line-height: .82 !important;
}
.integrated-page .portfolio-mobile__rail {
width: calc(100% + 48px) !important;
margin-left: -24px !important;
padding: 0 24px 24px !important;
gap: clamp(22px, 3.4vw, 34px) !important;
}
.integrated-page .portfolio-mobile-vhs {
flex-basis: clamp(154px, 18.5vw, 184px) !important;
width: clamp(154px, 18.5vw, 184px) !important;
height: clamp(500px, 61vw, 590px) !important;
min-height: clamp(500px, 61vw, 590px) !important;
}
.integrated-page .portfolio-mobile-vhs::before {
top: 104px !important;
bottom: 18px !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 28px !important;
width: 48px !important;
height: 48px !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
top: 106px !important;
}
.integrated-page .portfolio-mobile-vhs__title {
top: 154px !important;
bottom: 92px !important;
font-size: clamp(20px, 2.35vw, 23px) !important;
}
.integrated-page .portfolio-mobile-vhs__client {
bottom: 34px !important;
}
.integrated-page .portfolio-mobile__hint {
width: 100% !important;
margin: clamp(12px, 2vw, 20px) auto 0 !important;
text-align: center !important;
}
.integrated-page .portfolio-modal {
display: none !important;
}
.integrated-page .portfolio-modal.is-open {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 10000 !important;
padding: 0 !important;
background: transparent !important;
}
.integrated-page .portfolio-modal__backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(35, 25, 22, .82) !important;
}
.integrated-page .portfolio-modal__panel {
position: absolute !important;
top: 50% !important;
left: 50% !important;
display: block !important;
width: min(88vw, 420px) !important;
max-height: 90vh !important;
padding: 14px 16px 24px !important;
overflow-y: auto !important;
border: 3px solid #231916 !important;
border-radius: 8px !important;
background: #f3ead8 !important;
box-shadow: 8px 8px 0 rgba(0, 0, 0, .4) !important;
transform: translate(-50%, -50%) !important;
}
.integrated-page .portfolio-modal__bar {
display: grid !important;
grid-template-columns: 44px 1fr 44px 44px !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 14px !important;
}
.integrated-page .portfolio-modal__nav {
display: grid !important;
place-items: center !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #231916 !important;
font-size: 30px !important;
font-weight: 950 !important;
line-height: 1 !important;
}
.integrated-page .portfolio-modal__close {
display: grid !important;
place-items: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border: 2px solid #231916 !important;
border-radius: 50% !important;
background: #de5536 !important;
color: #f3ead8 !important;
font-size: 22px !important;
font-weight: 950 !important;
line-height: 1 !important;
}
.integrated-page .portfolio-modal__count {
margin: 0 !important;
color: #231916 !important;
font-size: 13px !important;
font-weight: 950 !important;
text-align: center !important;
}
.integrated-page .portfolio-modal-tv {
position: relative !important;
width: 100% !important;
max-width: 340px !important;
aspect-ratio: 2183 / 1500 !important;
margin: 0 auto 18px !important;
}
.integrated-page .portfolio-modal-tv__screen {
position: absolute !important;
top: 8.8% !important;
left: 7.9% !important;
width: 64.7% !important;
height: 80% !important;
z-index: 1 !important;
overflow: hidden !important;
border-radius: 10% / 14% !important;
background: #111 !important;
}
.integrated-page .portfolio-modal-tv__image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
.integrated-page .portfolio-modal-tv__frame {
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
pointer-events: none !important;
}
.integrated-page .portfolio-modal__info {
min-height: 250px !important;
padding: 8px 0 18px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.integrated-page .portfolio-modal__category {
margin: 0 0 6px !important;
color: #de5536 !important;
font-size: 12px !important;
font-weight: 950 !important;
}
.integrated-page .portfolio-modal__title {
margin: 0 0 8px !important;
color: #231916 !important;
font-size: clamp(22px, 3vw, 28px) !important;
font-weight: 950 !important;
line-height: 1.22 !important;
}
.integrated-page .portfolio-modal__client,
.integrated-page .portfolio-modal__description {
color: #231916 !important;
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.8 !important;
}
.integrated-page .portfolio-modal__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
margin-top: 16px !important;
padding: 0 22px !important;
border-radius: 999px !important;
background: #231916 !important;
color: #f3ead8 !important;
font-size: 12px !important;
font-weight: 950 !important;
text-decoration: none !important;
}
.integrated-page .top-partner-piece {
top: clamp(130px, 16vw, 188px) !important;
}
.integrated-page .top-partner-card {
padding-top: clamp(82px, 10vw, 104px) !important;
overflow: visible !important;
}
.integrated-page .top-partner-card__number {
top: clamp(-62px, -6vw, -42px) !important;
font-size: clamp(64px, 9vw, 94px) !important;
line-height: 1 !important;
z-index: 5 !important;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.integrated-page .business-layout {
min-height: 900px !important;
}
.integrated-page .business-visual {
width: min(74vw, 560px) !important;
}
.integrated-page .business-list {
width: min(72vw, 500px) !important;
margin-top: clamp(340px, 48vw, 440px) !important;
}
}
/* =========================================================
TABLET layout polish 03
Portrait/landscape split: business overlap, taller portrait VHS, larger modal.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .business-visual__frame {
transform: translate(-50%, -50%) scale(1) !important;
}
.integrated-page .business-visual__border--blue {
transform: translate(-50%, -50%) scale(1.045) !important;
}
.integrated-page .business-visual__border--green {
transform: translate(-50%, -50%) scale(1.085) !important;
}
.integrated-page .business-visual__border--yellow {
transform: translate(-50%, -50%) scale(1.125) !important;
}
.integrated-page .business-list {
margin-top: clamp(210px, 27vw, 300px) !important;
}
.integrated-page .portfolio-modal__panel {
width: min(88vw, 560px) !important;
padding: 18px 22px 30px !important;
}
.integrated-page .portfolio-modal__bar {
grid-template-columns: 1fr 44px auto 44px 44px !important;
column-gap: 4px !important;
}
.integrated-page .portfolio-modal__nav--prev {
grid-column: 2 !important;
}
.integrated-page .portfolio-modal__count {
grid-column: 3 !important;
min-width: 58px !important;
padding-inline: 4px !important;
}
.integrated-page .portfolio-modal__nav--next {
grid-column: 4 !important;
}
.integrated-page .portfolio-modal__close {
grid-column: 5 !important;
}
.integrated-page .portfolio-modal-tv {
max-width: 460px !important;
margin-bottom: 22px !important;
}
.integrated-page .portfolio-modal__title {
font-size: clamp(26px, 3.4vw, 34px) !important;
}
.integrated-page .portfolio-modal__client,
.integrated-page .portfolio-modal__description {
font-size: 15px !important;
}
.integrated-page .top-partner-card {
padding-top: clamp(52px, 6.5vw, 68px) !important;
}
.integrated-page .top-partner-card__number {
top: 14px !important;
font-size: clamp(44px, 6.2vw, 62px) !important;
line-height: .9 !important;
opacity: .95 !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .business-layout {
min-height: 760px !important;
}
.integrated-page .business-visual {
width: min(78vw, 600px) !important;
transform: translate(-6%, -4%) !important;
}
.integrated-page .business-list {
width: min(76vw, 520px) !important;
margin-top: clamp(245px, 34vw, 330px) !important;
}
.integrated-page .portfolio-section {
min-height: auto !important;
padding-top: 72px !important;
padding-bottom: 74px !important;
}
.integrated-page .portfolio-header {
margin-bottom: 14px !important;
}
/* VHS: 縦横比を保ちつつ全体を小さめにして余白を確保 */
.integrated-page .portfolio-mobile__rail {
padding-left: clamp(24px, 5vw, 48px) !important;
padding-right: clamp(24px, 5vw, 48px) !important;
gap: clamp(14px, 2vw, 20px) !important;
}
.integrated-page .portfolio-mobile-vhs {
flex-basis: clamp(146px, 18.5vw, 164px) !important;
width: clamp(146px, 18.5vw, 164px) !important;
height: clamp(538px, 68vw, 604px) !important;
min-height: clamp(538px, 68vw, 604px) !important;
}
.integrated-page .portfolio-mobile-vhs::before {
top: 102px !important;
bottom: 18px !important;
}
.integrated-page .portfolio-mobile-vhs::after {
top: 28px !important;
width: 46px !important;
height: 46px !important;
}
.integrated-page .portfolio-mobile-vhs__meta {
top: 104px !important;
}
.integrated-page .portfolio-mobile-vhs__title {
top: 152px !important;
bottom: 94px !important;
font-size: clamp(19px, 2.6vw, 22px) !important;
}
.integrated-page .portfolio-mobile-vhs__client {
bottom: 34px !important;
}
.integrated-page .portfolio-mobile__hint {
margin-top: 20px !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .business-list {
margin-top: clamp(180px, 19vw, 250px) !important;
}
.integrated-page .portfolio-section {
min-height: auto !important;
padding-top: clamp(58px, 6vw, 78px) !important;
padding-bottom: clamp(58px, 6vw, 78px) !important;
}
}
/* =========================================================
TABLET layout polish 04
Fine tune iPad portrait balance and modal scale.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .portfolio-modal__panel {
width: min(92vw, 640px) !important;
padding: 20px 24px 34px !important;
}
.integrated-page .portfolio-modal__bar {
grid-template-columns: 42px auto 42px 1fr 44px !important;
column-gap: 6px !important;
}
.integrated-page .portfolio-modal__nav--prev {
grid-column: 1 !important;
}
.integrated-page .portfolio-modal__count {
grid-column: 2 !important;
min-width: 62px !important;
text-align: center !important;
}
.integrated-page .portfolio-modal__nav--next {
grid-column: 3 !important;
}
.integrated-page .portfolio-modal__close {
grid-column: 5 !important;
}
.integrated-page .portfolio-modal-tv {
max-width: 520px !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .business-visual {
width: min(84vw, 650px) !important;
transform: translate(-10%, -6%) !important;
}
.integrated-page .business-list {
width: min(74vw, 520px) !important;
margin-top: clamp(205px, 28vw, 270px) !important;
}
.integrated-page .portfolio-section {
padding-top: 74px !important;
padding-bottom: 64px !important;
}
.integrated-page .portfolio-mobile-vhs {
flex-basis: clamp(176px, 23.5vw, 202px) !important;
width: clamp(176px, 23.5vw, 202px) !important;
height: clamp(650px, 80vw, 700px) !important;
min-height: clamp(650px, 80vw, 700px) !important;
}
.integrated-page .portfolio-mobile__hint {
width: 100% !important;
text-align: center !important;
}
}
/* =========================================================
TABLET layout polish 05
Center business icon/text group under the triangle object.
========================================================= */
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .business-list {
justify-self: center !important;
width: min(68vw, 500px) !important;
margin: clamp(205px, 28vw, 270px) auto 0 !important;
transform: translateX(-4%) !important;
}
}
/* =========================================================
TABLET layout polish 06
Bring business item list closer to the PC composition.
========================================================= */
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .about-block--business {
min-height: auto !important;
padding-top: clamp(54px, 7vw, 72px) !important;
padding-bottom: clamp(46px, 6vw, 64px) !important;
}
.integrated-page .business-layout {
min-height: clamp(640px, 78vw, 710px) !important;
}
.integrated-page .business-list {
position: absolute !important;
top: clamp(215px, 27vw, 260px) !important;
left: clamp(350px, 48vw, 420px) !important;
right: auto !important;
width: min(47vw, 390px) !important;
margin: 0 !important;
transform: none !important;
}
}
/* =========================================================
TABLET layout polish 07
Align business composition for iPad portrait and landscape.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .business-item {
display: grid !important;
grid-template-columns: 44px 64px minmax(0, 1fr) !important;
column-gap: 10px !important;
align-items: center !important;
width: 100% !important;
}
.integrated-page .business-item__icon {
grid-column: 1 !important;
width: 42px !important;
max-width: 42px !important;
justify-self: center !important;
}
.integrated-page .business-item__line {
grid-column: 2 !important;
display: block !important;
width: 64px !important;
height: 2px !important;
background: #f3ead8 !important;
opacity: 1 !important;
}
.integrated-page .business-item__line::after {
display: block !important;
background: #f3ead8 !important;
opacity: 1 !important;
}
.integrated-page .business-item__text {
grid-column: 3 !important;
min-width: 0 !important;
text-align: left !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .about-block--business {
padding-top: 50px !important;
padding-bottom: 54px !important;
}
.integrated-page .business-layout {
min-height: 650px !important;
padding-inline: 0 !important;
overflow: hidden !important;
}
.integrated-page .business-visual {
width: min(84vw, 650px) !important;
transform: translate(-1%, -6%) !important;
}
.integrated-page .business-list {
top: 246px !important;
left: min(50.5vw, 414px) !important;
width: min(45vw, 390px) !important;
gap: 16px !important;
}
.integrated-page .business-item__text span {
margin-bottom: 4px !important;
font-size: 12px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(22px, 3.35vw, 28px) !important;
line-height: 1.15 !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .about-block--business {
min-height: auto !important;
padding-top: clamp(44px, 5vw, 60px) !important;
padding-bottom: clamp(44px, 5vw, 60px) !important;
}
.integrated-page .business-layout {
position: relative !important;
min-height: clamp(570px, 58vw, 690px) !important;
padding-inline: 0 !important;
overflow: hidden !important;
}
.integrated-page .business-visual {
justify-self: start !important;
width: min(72vw, 760px) !important;
margin: 0 !important;
transform: translate(-2%, -6%) !important;
}
.integrated-page .business-list {
position: absolute !important;
top: clamp(180px, 22vw, 260px) !important;
left: min(52vw, 610px) !important;
right: auto !important;
width: min(44vw, 500px) !important;
margin: 0 !important;
gap: clamp(14px, 1.8vw, 22px) !important;
transform: none !important;
z-index: 6 !important;
}
.integrated-page .business-item__text span {
margin-bottom: 5px !important;
font-size: clamp(12px, 1.4vw, 15px) !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(24px, 3vw, 38px) !important;
line-height: 1.12 !important;
}
}
/* =========================================================
TABLET layout polish 08
Put the triangle tip between item 3 and 4, and keep the image readable.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .business-item {
grid-template-columns: 42px 58px minmax(0, 1fr) !important;
column-gap: 9px !important;
}
.integrated-page .business-item__icon {
width: 40px !important;
max-width: 40px !important;
}
.integrated-page .business-item__line {
width: 58px !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .about-block--business {
padding-top: 46px !important;
padding-bottom: 42px !important;
}
.integrated-page .business-layout {
min-height: 610px !important;
}
.integrated-page .business-visual {
width: min(78vw, 610px) !important;
transform: translate(5%, -3%) !important;
}
.integrated-page .business-list {
top: 194px !important;
left: min(50vw, 410px) !important;
width: min(45vw, 382px) !important;
gap: 13px !important;
}
.integrated-page .business-item__text span {
font-size: 11px !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(21px, 3.1vw, 26px) !important;
line-height: 1.12 !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .about-block--business {
padding-top: 38px !important;
padding-bottom: 38px !important;
}
.integrated-page .business-layout {
min-height: clamp(510px, 50vw, 600px) !important;
}
.integrated-page .business-visual {
width: min(62vw, 690px) !important;
transform: translate(3%, -3%) !important;
}
.integrated-page .business-list {
top: clamp(148px, 17.6vw, 198px) !important;
left: min(51vw, 590px) !important;
width: min(43vw, 470px) !important;
gap: clamp(10px, 1.35vw, 16px) !important;
}
.integrated-page .business-item__text span {
font-size: clamp(11px, 1.1vw, 13px) !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(22px, 2.35vw, 31px) !important;
line-height: 1.1 !important;
}
}
/* =========================================================
TABLET layout polish 09
Enlarge the triangle image area and align business labels on tablets.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .business-item {
grid-template-columns: 40px 54px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.integrated-page .business-item__icon {
width: 38px !important;
max-width: 38px !important;
}
.integrated-page .business-item__line {
width: 54px !important;
}
.integrated-page .business-item__text strong {
white-space: nowrap !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .about-block--business {
padding-top: 44px !important;
padding-bottom: 40px !important;
}
.integrated-page .business-layout {
min-height: 640px !important;
overflow: hidden !important;
}
.integrated-page .business-visual {
justify-self: start !important;
width: min(88vw, 700px) !important;
margin-left: 0 !important;
transform: translate(0, -3%) !important;
}
.integrated-page .business-list {
top: 198px !important;
left: min(45.5vw, 374px) !important;
width: min(53vw, 438px) !important;
gap: 12px !important;
}
.integrated-page .business-item__text span {
margin-bottom: 3px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(17px, 2.45vw, 21px) !important;
line-height: 1.08 !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .business-layout {
min-height: clamp(540px, 53vw, 640px) !important;
overflow: hidden !important;
}
.integrated-page .business-visual {
justify-self: start !important;
width: min(74vw, 820px) !important;
margin-left: 0 !important;
transform: translate(0, -3%) !important;
}
.integrated-page .business-list {
top: clamp(154px, 18vw, 208px) !important;
left: min(55vw, 650px) !important;
width: min(42vw, 500px) !important;
gap: clamp(10px, 1.35vw, 16px) !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(22px, 2.3vw, 30px) !important;
line-height: 1.08 !important;
}
}
/* =========================================================
TABLET layout polish 10
Stronger business triangle image presence and portfolio scroll hint placement.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .about-block--business {
overflow: hidden !important;
}
.integrated-page .business-layout {
position: relative !important;
padding-inline: 0 !important;
overflow: hidden !important;
}
.integrated-page .business-visual {
z-index: 2 !important;
}
.integrated-page .business-list {
z-index: 6 !important;
}
.integrated-page .portfolio-mobile {
position: relative !important;
padding-top: clamp(28px, 3.4vw, 42px) !important;
}
.integrated-page .portfolio-mobile__hint {
position: absolute !important;
top: 0 !important;
left: 50% !important;
z-index: 8 !important;
display: block !important;
width: auto !important;
margin: 0 !important;
color: rgba(35, 25, 22, .82) !important;
font-size: clamp(12px, 1.35vw, 15px) !important;
line-height: 1 !important;
text-align: center !important;
white-space: nowrap !important;
transform: translateX(-50%) !important;
}
.integrated-page .portfolio-mobile__rail {
margin-top: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .business-layout {
min-height: 660px !important;
}
.integrated-page .business-visual {
width: min(106vw, 820px) !important;
margin-left: 0 !important;
transform: translate(-2%, -3%) !important;
}
.integrated-page .business-list {
top: 200px !important;
left: min(47vw, 386px) !important;
width: min(52vw, 428px) !important;
gap: 11px !important;
}
.integrated-page .business-item {
grid-template-columns: 36px 48px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .business-item__icon {
width: 34px !important;
max-width: 34px !important;
}
.integrated-page .business-item__line {
width: 48px !important;
}
.integrated-page .business-item__text span {
font-size: 9px !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(16px, 2.25vw, 19px) !important;
line-height: 1.06 !important;
white-space: nowrap !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .business-layout {
min-height: clamp(560px, 54vw, 660px) !important;
}
.integrated-page .business-visual {
width: min(88vw, 980px) !important;
margin-left: 0 !important;
transform: translate(0, -3%) !important;
}
.integrated-page .business-list {
top: clamp(152px, 17.6vw, 206px) !important;
left: min(54vw, 638px) !important;
width: min(44vw, 520px) !important;
}
.integrated-page .business-item__text strong {
font-size: clamp(22px, 2.25vw, 29px) !important;
white-space: nowrap !important;
}
}
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .portfolio-mobile {
padding-top: 34px !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .portfolio-mobile {
padding-top: 36px !important;
}
}
/* =========================================================
TABLET portrait ABOUT business density polish 11
Tighten the orange ABOUT area only; keep intro/staff/logo untouched.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.integrated-page .about-block--business {
min-height: calc(100svh - var(--fixed-header-height, 0px)) !important;
padding-top: clamp(34px, 4.8vw, 52px) !important;
padding-bottom: clamp(34px, 5vw, 56px) !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-copy {
position: relative !important;
z-index: 8 !important;
padding-top: 0 !important;
margin-bottom: clamp(16px, 2.2vw, 26px) !important;
}
.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(560px, 67vw, 640px) !important;
margin-top: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual {
position: absolute !important;
left: 0 !important;
top: clamp(172px, 22vw, 218px) !important;
z-index: 1 !important;
width: min(118vw, 920px) !important;
margin: 0 !important;
opacity: 1 !important;
pointer-events: none !important;
transform: translate(-6%, 0) !important;
}
.integrated-page .about-block--business .business-visual__frame,
.integrated-page .about-block--business .business-visual__border {
opacity: 1 !important;
}
.integrated-page .about-block--business .business-list {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: 9 !important;
width: min(66vw, 520px) !important;
margin: 0 auto !important;
padding: 0 !important;
gap: clamp(10px, 1.45vw, 14px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item {
grid-template-columns: 38px 52px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.integrated-page .about-block--business .business-item__icon {
width: 36px !important;
max-width: 36px !important;
}
.integrated-page .about-block--business .business-item__line {
width: 52px !important;
}
.integrated-page .about-block--business .business-item__text span {
font-size: 10px !important;
line-height: 1 !important;
}
.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(18px, 2.55vw, 22px) !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
}
/* =========================================================
LEGACY tablet ABOUT business final alignment 13
Kept for landscape/common tablet adjustments; portrait is disabled below.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
aspect-ratio: auto !important;
opacity: 1 !important;
pointer-events: none !important;
}
.integrated-page .about-block--business .business-visual__frame,
.integrated-page .about-block--business .business-visual__border,
body.integrated-page .about-block--business .business-visual__frame,
body.integrated-page .about-block--business .business-visual__border {
clip-path: polygon(0 0, 86.602% 50%, 0 100%) !important;
}
.integrated-page .about-block--business .business-visual__slides,
body.integrated-page .about-block--business .business-visual__slides {
width: 100% !important;
height: 100% !important;
}
.integrated-page .about-block--business .business-slide,
body.integrated-page .about-block--business .business-slide {
object-position: center center !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .about-block--business,
body.integrated-page .about-block--business {
min-height: clamp(610px, 58vw, 684px) !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-layout,
body.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(430px, 42vw, 496px) !important;
margin-top: clamp(18px, 2vw, 28px) !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
position: absolute !important;
top: clamp(16px, 2vw, 24px) !important;
left: 0 !important;
z-index: 2 !important;
width: min(67vw, 790px) !important;
height: min(77.35vw, 912px) !important;
max-width: none !important;
margin: 0 !important;
transform: translate(0, 0) !important;
}
.integrated-page .about-block--business .business-visual__border--blue,
body.integrated-page .about-block--business .business-visual__border--blue {
transform: translate(18px, 0) scale(1.035) !important;
}
.integrated-page .about-block--business .business-visual__border--green,
body.integrated-page .about-block--business .business-visual__border--green {
transform: translate(36px, 0) scale(1.07) !important;
}
.integrated-page .about-block--business .business-visual__border--yellow,
body.integrated-page .about-block--business .business-visual__border--yellow {
transform: translate(54px, 0) scale(1.105) !important;
}
.integrated-page .about-block--business .business-list,
body.integrated-page .about-block--business .business-list {
position: absolute !important;
z-index: 12 !important;
top: clamp(42px, 5.6vw, 66px) !important;
left: min(50.5vw, 596px) !important;
width: min(43vw, 508px) !important;
margin: 0 !important;
gap: clamp(12px, 1.55vw, 18px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item,
body.integrated-page .about-block--business .business-item {
grid-template-columns: 44px 58px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.integrated-page .about-block--business .business-item__icon,
body.integrated-page .about-block--business .business-item__icon {
width: 42px !important;
max-width: 42px !important;
}
.integrated-page .about-block--business .business-item__line,
body.integrated-page .about-block--business .business-item__line {
width: 58px !important;
}
.integrated-page .about-block--business .business-item__text strong,
body.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(21px, 2.12vw, 25px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
@media not all {
.integrated-page .about-block--business,
body.integrated-page .about-block--business {
min-height: clamp(860px, 105vw, 930px) !important;
padding-top: clamp(24px, 3.2vw, 34px) !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-copy,
body.integrated-page .about-block--business .business-copy {
position: relative !important;
z-index: 16 !important;
padding-top: 0 !important;
margin-bottom: clamp(10px, 1.5vw, 16px) !important;
}
.integrated-page .about-block--business .business-layout,
body.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(600px, 73vw, 690px) !important;
margin-top: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
position: absolute !important;
top: clamp(120px, 15.5vw, 150px) !important;
left: 0 !important;
z-index: 2 !important;
width: min(78vw, 640px) !important;
height: min(90.1vw, 739px) !important;
max-width: none !important;
margin: 0 !important;
transform: translate(0, 0) !important;
}
.integrated-page .about-block--business .business-visual__border--blue,
body.integrated-page .about-block--business .business-visual__border--blue {
transform: translate(14px, 0) scale(1.035) !important;
}
.integrated-page .about-block--business .business-visual__border--green,
body.integrated-page .about-block--business .business-visual__border--green {
transform: translate(28px, 0) scale(1.07) !important;
}
.integrated-page .about-block--business .business-visual__border--yellow,
body.integrated-page .about-block--business .business-visual__border--yellow {
transform: translate(42px, 0) scale(1.105) !important;
}
.integrated-page .about-block--business .business-list,
body.integrated-page .about-block--business .business-list {
position: relative !important;
z-index: 18 !important;
width: min(51vw, 418px) !important;
margin: 0 0 0 min(42vw, 344px) !important;
padding-top: clamp(4px, .8vw, 8px) !important;
gap: clamp(8px, 1.15vw, 12px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item,
body.integrated-page .about-block--business .business-item {
grid-template-columns: 34px 42px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .about-block--business .business-item__icon,
body.integrated-page .about-block--business .business-item__icon {
width: 32px !important;
max-width: 32px !important;
}
.integrated-page .about-block--business .business-item__line,
body.integrated-page .about-block--business .business-item__line {
width: 42px !important;
}
.integrated-page .about-block--business .business-item__text span,
body.integrated-page .about-block--business .business-item__text span {
font-size: 9px !important;
line-height: 1 !important;
margin-bottom: 3px !important;
}
.integrated-page .about-block--business .business-item__text strong,
body.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(15px, 2.24vw, 18px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
/* =========================================================
LEGACY tablet ABOUT business polish 12
Kept for landscape/common tablet adjustments; portrait is disabled below.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .about-block--business .business-visual {
aspect-ratio: 0.866 / 1 !important;
}
.integrated-page .about-block--business .business-visual__frame,
.integrated-page .about-block--business .business-visual__border {
clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .about-block--business {
min-height: clamp(650px, 61vw, 720px) !important;
}
.integrated-page .about-block--business .business-layout {
min-height: clamp(500px, 48vw, 575px) !important;
}
.integrated-page .about-block--business .business-visual {
width: min(76vw, 900px) !important;
}
}
@media not all {
.integrated-page .about-block--business {
min-height: calc(100svh - var(--fixed-header-height, 0px)) !important;
padding-top: clamp(22px, 3.6vw, 36px) !important;
padding-bottom: 0 !important;
}
.integrated-page .about-block--business .business-copy {
z-index: 12 !important;
padding-top: 0 !important;
margin-bottom: clamp(12px, 1.8vw, 18px) !important;
}
.integrated-page .about-block--business .business-layout {
min-height: clamp(700px, 88vw, 820px) !important;
margin-top: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual {
top: clamp(190px, 24vw, 235px) !important;
left: 0 !important;
z-index: 2 !important;
width: min(122vw, 960px) !important;
transform: translate(-11%, 0) !important;
}
.integrated-page .about-block--business .business-list {
z-index: 14 !important;
width: min(54vw, 430px) !important;
margin-left: min(43vw, 352px) !important;
margin-right: 0 !important;
gap: clamp(10px, 1.6vw, 15px) !important;
}
.integrated-page .about-block--business .business-item {
grid-template-columns: 36px 48px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .about-block--business .business-item__icon {
width: 34px !important;
max-width: 34px !important;
}
.integrated-page .about-block--business .business-item__line {
width: 48px !important;
}
.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(17px, 2.45vw, 21px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
/* =========================================================
LEGACY tablet ABOUT business final alignment 14
Kept for landscape/common tablet adjustments; portrait is disabled below.
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
aspect-ratio: auto !important;
opacity: 1 !important;
pointer-events: none !important;
}
.integrated-page .about-block--business .business-visual__frame,
.integrated-page .about-block--business .business-visual__border,
body.integrated-page .about-block--business .business-visual__frame,
body.integrated-page .about-block--business .business-visual__border {
clip-path: polygon(0 0, 86.602% 50%, 0 100%) !important;
}
.integrated-page .about-block--business .business-visual__slides,
body.integrated-page .about-block--business .business-visual__slides {
width: 100% !important;
height: 100% !important;
}
}
@media (min-width: 981px) and (max-width: 1199px), (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
.integrated-page .about-block--business,
body.integrated-page .about-block--business {
min-height: clamp(610px, 58vw, 684px) !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-layout,
body.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(430px, 42vw, 496px) !important;
margin-top: clamp(18px, 2vw, 28px) !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
position: absolute !important;
top: clamp(16px, 2vw, 24px) !important;
left: 0 !important;
z-index: 2 !important;
width: min(67vw, 790px) !important;
height: min(77.35vw, 912px) !important;
max-width: none !important;
margin: 0 !important;
transform: translate(0, 0) !important;
}
.integrated-page .about-block--business .business-visual__border--blue,
body.integrated-page .about-block--business .business-visual__border--blue {
transform: translate(18px, 0) scale(1.035) !important;
}
.integrated-page .about-block--business .business-visual__border--green,
body.integrated-page .about-block--business .business-visual__border--green {
transform: translate(36px, 0) scale(1.07) !important;
}
.integrated-page .about-block--business .business-visual__border--yellow,
body.integrated-page .about-block--business .business-visual__border--yellow {
transform: translate(54px, 0) scale(1.105) !important;
}
.integrated-page .about-block--business .business-list,
body.integrated-page .about-block--business .business-list {
position: absolute !important;
z-index: 12 !important;
top: clamp(42px, 5.6vw, 66px) !important;
left: min(50.5vw, 596px) !important;
width: min(43vw, 508px) !important;
margin: 0 !important;
gap: clamp(12px, 1.55vw, 18px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item,
body.integrated-page .about-block--business .business-item {
grid-template-columns: 44px 58px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.integrated-page .about-block--business .business-item__icon,
body.integrated-page .about-block--business .business-item__icon {
width: 42px !important;
max-width: 42px !important;
}
.integrated-page .about-block--business .business-item__line,
body.integrated-page .about-block--business .business-item__line {
width: 58px !important;
}
.integrated-page .about-block--business .business-item__text strong,
body.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(21px, 2.12vw, 25px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
@media not all {
.integrated-page .about-block--business,
body.integrated-page .about-block--business {
min-height: clamp(860px, 105vw, 930px) !important;
padding-top: clamp(24px, 3.2vw, 34px) !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-copy,
body.integrated-page .about-block--business .business-copy {
position: relative !important;
z-index: 16 !important;
padding-top: 0 !important;
margin-bottom: clamp(10px, 1.5vw, 16px) !important;
}
.integrated-page .about-block--business .business-layout,
body.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(600px, 73vw, 690px) !important;
margin-top: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
position: absolute !important;
top: clamp(120px, 15.5vw, 150px) !important;
left: 0 !important;
z-index: 2 !important;
width: min(78vw, 640px) !important;
height: min(90.1vw, 739px) !important;
max-width: none !important;
margin: 0 !important;
transform: translate(0, 0) !important;
}
.integrated-page .about-block--business .business-visual__border--blue,
body.integrated-page .about-block--business .business-visual__border--blue {
transform: translate(14px, 0) scale(1.035) !important;
}
.integrated-page .about-block--business .business-visual__border--green,
body.integrated-page .about-block--business .business-visual__border--green {
transform: translate(28px, 0) scale(1.07) !important;
}
.integrated-page .about-block--business .business-visual__border--yellow,
body.integrated-page .about-block--business .business-visual__border--yellow {
transform: translate(42px, 0) scale(1.105) !important;
}
.integrated-page .about-block--business .business-list,
body.integrated-page .about-block--business .business-list {
position: relative !important;
z-index: 18 !important;
width: min(51vw, 418px) !important;
margin: 0 0 0 min(42vw, 344px) !important;
padding-top: clamp(4px, .8vw, 8px) !important;
gap: clamp(8px, 1.15vw, 12px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item,
body.integrated-page .about-block--business .business-item {
grid-template-columns: 34px 42px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .about-block--business .business-item__icon,
body.integrated-page .about-block--business .business-item__icon {
width: 32px !important;
max-width: 32px !important;
}
.integrated-page .about-block--business .business-item__line,
body.integrated-page .about-block--business .business-item__line {
width: 42px !important;
}
.integrated-page .about-block--business .business-item__text span,
body.integrated-page .about-block--business .business-item__text span {
font-size: 9px !important;
line-height: 1 !important;
margin-bottom: 3px !important;
}
.integrated-page .about-block--business .business-item__text strong,
body.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(15px, 2.24vw, 18px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
/* =========================================================
TABLET ABOUT business portrait final
Final override for the ABOUT orange area on portrait tablets only.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.integrated-page .about-block--business,
body.integrated-page .about-block--business {
position: relative !important;
min-height: clamp(760px, 88vw, 900px) !important;
padding-top: clamp(24px, 3.2vw, 34px) !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.integrated-page .about-block--business .business-copy,
body.integrated-page .about-block--business .business-copy {
position: relative !important;
z-index: 20 !important;
padding-top: 0 !important;
margin-bottom: clamp(8px, 1.2vw, 14px) !important;
}
.integrated-page .about-block--business .business-layout,
body.integrated-page .about-block--business .business-layout {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-height: clamp(540px, 60vw, 600px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.integrated-page .about-block--business .business-visual,
body.integrated-page .about-block--business .business-visual {
position: absolute !important;
top: clamp(-430px, -52vw, -360px) !important;
left: 0 !important;
z-index: 1 !important;
width: min(118vw, 980px) !important;
height: min(136.3vw, 1132px) !important;
max-width: none !important;
margin: 0 !important;
opacity: 1 !important;
pointer-events: none !important;
transform: translate(-17%, 0) !important;
}
.integrated-page .about-block--business .business-visual__frame,
.integrated-page .about-block--business .business-visual__border,
body.integrated-page .about-block--business .business-visual__frame,
body.integrated-page .about-block--business .business-visual__border {
clip-path: polygon(0 0, 86.602% 50%, 0 100%) !important;
opacity: 1 !important;
}
.integrated-page .about-block--business .business-visual__slides,
body.integrated-page .about-block--business .business-visual__slides {
width: 100% !important;
height: 100% !important;
}
.integrated-page .about-block--business .business-slide,
body.integrated-page .about-block--business .business-slide {
object-position: center center !important;
}
.integrated-page .about-block--business .business-visual__border--blue,
body.integrated-page .about-block--business .business-visual__border--blue {
transform: translate(16px, 0) scale(1.035) !important;
}
.integrated-page .about-block--business .business-visual__border--green,
body.integrated-page .about-block--business .business-visual__border--green {
transform: translate(32px, 0) scale(1.07) !important;
}
.integrated-page .about-block--business .business-visual__border--yellow,
body.integrated-page .about-block--business .business-visual__border--yellow {
transform: translate(48px, 0) scale(1.105) !important;
}
.integrated-page .about-block--business .business-list,
body.integrated-page .about-block--business .business-list {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: 10 !important;
width: min(56vw, 456px) !important;
margin: clamp(8px, calc((100vw - 768px) * .08), 24px) 0 0 min(40vw, 330px) !important;
padding-top: 0 !important;
gap: clamp(9px, 1.3vw, 13px) !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item,
body.integrated-page .about-block--business .business-item {
grid-template-columns: 36px 48px minmax(0, 1fr) !important;
column-gap: 7px !important;
}
.integrated-page .about-block--business .business-item__icon,
body.integrated-page .about-block--business .business-item__icon {
width: 34px !important;
max-width: 34px !important;
}
.integrated-page .about-block--business .business-item__line,
body.integrated-page .about-block--business .business-item__line {
width: 48px !important;
transform: scaleX(1) !important;
}
.integrated-page .about-block--business .business-item__line::after,
body.integrated-page .about-block--business .business-item__line::after {
transform: translateY(-50%) scale(1) !important;
}
.integrated-page .about-block--business .business-item__text,
body.integrated-page .about-block--business .business-item__text {
opacity: 1 !important;
transform: none !important;
}
.integrated-page .about-block--business .business-item__text span,
body.integrated-page .about-block--business .business-item__text span {
font-size: 9px !important;
line-height: 1 !important;
margin-bottom: 3px !important;
}
.integrated-page .about-block--business .business-item__text strong,
body.integrated-page .about-block--business .business-item__text strong {
font-size: clamp(16px, 2.35vw, 20px) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
}
}
/* ============================================================
ABOUT BUSINESS — component v5
.ab = new independent component replacing old .about-block--business
Old .business-* selectors are dead code (no HTML matches them).
============================================================ */
/* ---- base (all viewports) ---- */
.ab {
background: #de5536;
color: #f3ead8;
overflow: hidden;
position: relative;
}
/* [1] PC 余白設計: 上下パディングを広げてポスター感 */
.ab__inner {
width: min(100%, 1360px);
margin: 0 auto;
padding: clamp(80px, 10vw, 128px) clamp(24px, 5vw, 80px) clamp(72px, 9vw, 112px);
}
/* [3] PC コピー: line-height・letter-spacing 調整、上マージンで重心を下げる */
.ab__copy {
text-align: center;
margin: clamp(8px, 1.5vw, 24px) 0 clamp(36px, 4.5vw, 60px);
font-size: clamp(32px, 5.2vw, 72px);
font-weight: 950;
line-height: 1.35;
letter-spacing: 0.01em;
color: #f3ead8;
white-space: nowrap;
}
.ab__copy span {
color: #de5536;
-webkit-text-stroke: 2px #f3ead8;
paint-order: stroke fill;
}
.ab__copy strong {
color: #f3ead8;
-webkit-text-stroke: 0;
font-weight: 950;
}
/* slides */
.ab__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 42% center;
opacity: 0;
transition: opacity 0.65s ease;
}
.ab__slide.is-active {
opacity: 1;
}
/* [7] rings base */
.ab__ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
width: 100%;
height: 100%;
opacity: 0.9;
}
/* [4] サービスタイポグラフィ: グリッドカラム調整 */
.ab-svc {
display: grid;
grid-template-columns: auto minmax(24px, 1fr) auto;
align-items: center;
column-gap: clamp(10px, 1.3vw, 18px);
cursor: pointer;
user-select: none;
transition: transform 0.22s ease;
transform-origin: left center;
}
.ab-svc:hover {
transform: scale(1.06);
}
/* [4] アイコン: 少し存在感UP */
.ab-svc__icon {
display: block;
width: clamp(38px, 4vw, 60px);
height: clamp(38px, 4vw, 60px);
object-fit: contain;
flex-shrink: 0;
}
.ab-svc__line {
display: block;
height: 2px;
background: #f3ead8;
position: relative;
}
.ab-svc__line::after {
content: "";
position: absolute;
right: -1px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background: #f3ead8;
transform: translateY(-50%);
}
.ab-svc__text {
min-width: 0;
}
/* [4] 英語ラベル: 小さめ・ゆったりトラッキング（補足的存在） */
.ab-svc__text span {
display: block;
font-size: clamp(8px, 0.82vw, 11px);
font-weight: 800;
letter-spacing: 0.13em;
line-height: 1;
color: #f3ead8;
margin-bottom: 4px;
opacity: 0.85;
}
/* [4] 日本語名: 大きめ・読みやすく（主役） */
.ab-svc__text strong {
display: block;
font-size: clamp(15px, 1.6vw, 22px);
font-weight: 900;
line-height: 1.2;
color: #f3ead8;
white-space: normal;
overflow-wrap: break-word;
}
/* ---- PC / tablet landscape ≥900px ---- */
@media (min-width: 900px) {
/* [1][2] PC 余白・縦位置: 左カラムを広げて円を大きく表示 */
.ab__body {
display: grid;
grid-template-columns: minmax(400px, 54%) 1fr;
align-items: center;
gap: clamp(24px, 3.5vw, 52px);
}
.ab__visual {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: visible;
}
.ab__circle {
position: absolute;
inset: 0;
border-radius: 50%;
overflow: hidden;
z-index: 3;
}
/* [7] リング PC: 扇型展開（角度を抑えて上品に） */
.ab__ring--blue {
bottom: -5%;
left: -16%;
top: auto;
background: #5188a3;
z-index: 2;
transform: rotate(0deg);
transform-origin: 116% 55%;
}
.ab__ring--green {
bottom: -5%;
left: -16%;
top: auto;
background: #9ca95b;
z-index: 1;
transform: rotate(-5deg);
transform-origin: 116% 55%;
}
.ab__ring--yellow {
bottom: -5%;
left: -16%;
top: auto;
background: #ec9f32;
z-index: 0;
transform: rotate(-10deg);
transform-origin: 116% 55%;
}
/* [2][4] サービス一覧 */
.ab__services {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.8vw, 26px);
position: relative;
z-index: 5;
padding: clamp(4px, 1.5vw, 16px) 0;
}
.ab-svc__text span {
font-size: clamp(9px, 0.88vw, 12px);
letter-spacing: 0.15em;
}
.ab-svc__text strong {
font-size: clamp(15px, 1.65vw, 24px);
}
}
/* ---- SP / tablet portrait ≤899px ---- */
@media (max-width: 899px) {
/* [5] SP コピー: 上余白広め、水平センタリング確保 */
.ab__inner {
padding: clamp(56px, 10vw, 88px) 0 0;
text-align: center;
}
/* [5] SP コピー: フォントサイズUP */
.ab__copy {
padding: 0 clamp(16px, 4vw, 28px);
margin-bottom: clamp(28px, 6vw, 44px);
font-size: clamp(25px, 6.8vw, 48px);
white-space: nowrap;
text-align: center;
}
.ab__body {
position: relative;
}
/* SP 円: left:50% + translateX(-50%) で親水平中央に明示的に固定 */
.ab__visual {
position: relative;
width: min(112vw, 760px);
aspect-ratio: 1 / 1;
left: 50%;
transform: translateX(-50%);
overflow: visible;
}
.ab__circle {
position: absolute;
inset: 0;
border-radius: 50%;
overflow: hidden;
z-index: 3;
}
/* [3] SP 黒オーバーレイ: テキスト可読性向上 */
.ab__circle::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.28);
z-index: 4;
pointer-events: none;
}
/* [7] リング SP: 扇型展開（角度を抑えて上品に） */
.ab__ring--blue {
bottom: 0;
left: -10%;
top: auto;
background: #5188a3;
z-index: 2;
transform: rotate(0deg);
transform-origin: 110% 50%;
}
.ab__ring--green {
bottom: 0;
left: -10%;
top: auto;
background: #9ca95b;
z-index: 1;
transform: rotate(-5deg);
transform-origin: 110% 50%;
}
.ab__ring--yellow {
bottom: 0;
left: -10%;
top: auto;
background: #ec9f32;
z-index: 0;
transform: rotate(-10deg);
transform-origin: 110% 50%;
}
/* [6] SP オーバーレイ位置: 写真主役を避けて少し上へ */
.ab__services {
position: absolute;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
width: min(62vw, 320px);
z-index: 5;
display: flex;
flex-direction: column;
gap: clamp(6px, 1.8vw, 13px);
}
.ab-svc {
grid-template-columns: auto minmax(14px, 32px) 1fr;
column-gap: clamp(6px, 1.6vw, 11px);
transform-origin: left center;
}
/* [3] SP アイコン: サイズUP */
.ab-svc__icon {
width: clamp(28px, 6.5vw, 42px);
height: clamp(28px, 6.5vw, 42px);
filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.ab-svc__line {
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.ab-svc__text {
min-width: 0;
}
/* [3] SP テキスト: サイズUP、影を強めて可読性確保 */
.ab-svc__text span {
font-size: clamp(7px, 1.7vw, 11px);
letter-spacing: 0.1em;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.ab-svc__text strong {
font-size: clamp(12px, 3.1vw, 18px);
text-shadow: 0 1px 4px rgba(0,0,0,.8);
white-space: normal;
overflow-wrap: break-word;
}
/* padding below the circle */
.ab__body::after {
content: "";
display: block;
height: clamp(40px, 10vw, 72px);
}
}
/* =========================================================
SP final overrides — must stay last
========================================================= */
@media (max-width: 767px) {
/* About: copy above piece-grid, vertical-title below */
.integrated-page .hero-visual__copy {
top: 13% !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: clamp(22px, 5.5vw, 32px) !important;
line-height: 1.1 !important;
white-space: nowrap !important;
text-align: center !important;
}
.integrated-page .hero-page .hero-visual__vertical-title {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
right: auto !important;
left: 50% !important;
top: auto !important;
bottom: -28% !important;
transform: translateX(-50%) !important;
font-size: clamp(36px, 11vw, 52px) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Portfolio: SCROLL hint above VHS cards */
.integrated-page .portfolio-mobile {
padding-top: 28px !important;
position: relative !important;
}
.integrated-page .portfolio-mobile__hint {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
transform: none !important;
z-index: 10 !important;
color: rgba(35, 25, 22, .65) !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
text-align: center !important;
line-height: 28px !important;
}
/* Partner: puzzle objects high enough to be visible */
.integrated-page .top-partner-piece--bria {
top: 32% !important;
left: -8px !important;
}
.integrated-page .top-partner-piece--partner {
top: 32% !important;
right: -8px !important;
}
}
/* ==========================================================
HERO piece motion — transparent WebM video
Mirrors the old hero-visual__piece-grid placement.
Sizes per breakpoint:
PC (≥901px) : min(38vw, 620px), centered 50%/50%
Tablet (≤900px) : min(54vw, 500px)
SP (≤767px) : min(62vw, 250px), opacity .86
z-index 7 matches old piece-grid layer.
========================================================== */
/* Hide old static piece-grid; video is the primary display */
.integrated-page .hero-visual__piece-grid {
display: none !important;
}
/* Video wrapper — same position contract as the old piece-grid */
.integrated-page .hero-visual__piece-motion {
position: absolute;
width: min(38vw, 620px);
height: min(38vw, 620px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 7;
pointer-events: none;
}
.hero-visual__piece-video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Tablet portrait + landscape ≤900px */
@media (max-width: 900px) {
.integrated-page .hero-visual__piece-motion {
width: min(54vw, 500px);
height: min(54vw, 500px);
}
}
/* SP ≤767px */
@media (max-width: 767px) {
.integrated-page .hero-visual__piece-motion {
width: min(62vw, 250px);
height: min(62vw, 250px);
opacity: .86;
}
}
/* ══════════════════════════════════════════════════════════════════════════
フォント本採用: C案 — Noto Sans JP（日本語）+ Sora（英字見出し/ナビ）
ただし .hero-visual__vertical-title のみA案相当（Helvetica Neue / weight 950）
══════════════════════════════════════════════════════════════════════════ */
/* ── ベース: 日本語フォントをNoto Sans JPに変更 ──────────────────────────── */
body {
font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
/* aboutセクション・contactセクションはminifiedブロックで個別指定されているので上書き */
.about-section,
.contact-section {
font-family: "Noto Sans JP", "Hiragino Sans", sans-serif !important;
}
/* ── 英字見出し群 → Sora ────────────────────────────────────────────────── */
.about-intro__title,
.about-intro__big-logo span,
.about-intro__big-logo strong {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif !important;
letter-spacing: -.065em !important;
}
.portfolio-header__title {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
/* letter-spacing は上書き済みの -.06em を維持 */
}
.top-partner-title {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif !important;
/* letter-spacing は上書き済みの -.06em を維持 */
}
.contact-header__title {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
}
/* ── ナビゲーション → Sora ─────────────────────────────────────────────── */
.site-header__nav {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
letter-spacing: .03em;
}
/* ── スクロールテロップ → Sora ─────────────────────────────────────────── */
.scroll-text__track p {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .06em;
}
/* ── HEROコピー（日本語）→ Noto Sans JP ────────────────────────────────── */
.hero-visual__copy {
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
letter-spacing: -.02em;
}
/* ── ABOUT本文 → Noto Sans JP ───────────────────────────────────────────── */
.about-intro__copy {
font-family: "Noto Sans JP", sans-serif !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
line-height: 2.1 !important;
}
/* ── PARTNER リードテキスト → Noto Sans JP ──────────────────────────────── */
.top-partner-lead {
font-family: "Noto Sans JP", sans-serif !important;
/* font-weight / letter-spacing は上書き済み（800 / .02em）を維持 */
}
/* ── Business list ─────────────────────────────────────────────────────── */
.business-item__text span {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .06em;
}
.business-item__text strong {
font-family: "Noto Sans JP", sans-serif;
}
/* ── CONTACTフォーム ────────────────────────────────────────────────────── */
.contact-notice {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
letter-spacing: .03em;
}
.contact-form__field label {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
letter-spacing: .04em;
}
.contact-form__field input,
.contact-form__field textarea {
font-family: "Noto Sans JP", sans-serif;
}
.contact-form__submit {
font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .12em;
}
/* Contact placeholder: slightly lighter than input text */
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
font-weight: 400;
opacity: .55;
}
/* ──────────────────────────────────────────────────────────────────────────
例外: .hero-visual__vertical-title のみA案相当
「想像のその先へ」— HEROの強いアイキャッチとして迫力を維持
Helvetica Neue / weight 950 / letter-spacing -.03em
────────────────────────────────────────────────────────────────────────── */
.hero-visual__vertical-title {
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif !important;
font-weight: 950 !important;
letter-spacing: -.03em !important;
}
/* ── タブレット縦: POLTFOLIOレール 左右余白を広めに ───────────────────────── */
@media (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
.integrated-page .portfolio-mobile__rail {
padding-left: clamp(56px, 9vw, 88px) !important;
padding-right: clamp(40px, 7vw, 72px) !important;
}
}
/* ── Tablet portrait — mirror SP hero layout ────────────────────────────
(landscape tablets keep the PC-style layout via the ≤900px rule above) */
@media (max-width: 980px) and (orientation: portrait) {
/* Hide semicircle */
.integrated-page .hero-visual__semicircle {
display: none !important;
}
/* Copy: centered, above video */
/* Phase B(1.1.3) F-4: 320–440px で floor 固定になり縦横比が動いていたため、
vw 係数を上げて可変域を前倒し。ceil 42 で 768px(タブレット縦)は現状維持。 */
.integrated-page .hero-visual__copy {
left: 50% !important;
top: 12% !important;
transform: translateX(-50%) !important;
font-size: clamp(26px, 7vw, 42px) !important;
line-height: 1.1 !important;
white-space: nowrap !important;
text-align: center !important;
}
/* Video: centered, SP-proportional size */
.integrated-page .hero-visual__piece-motion {
width: min(52vw, 380px) !important;
height: min(52vw, 380px) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
opacity: .9 !important;
}
/* Vertical title → horizontal, below video */
/* Phase B(1.1.3) F-4: HEROコピーと可変域を揃える。ceil 44 で 768px(タブレット縦)は
ほぼ現状維持（43→44）。320px では 40px まで下げ、狭幅での過大感を解消。 */
.integrated-page .hero-page .hero-visual__vertical-title {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
right: auto !important;
left: 50% !important;
top: auto !important;
bottom: -26% !important;
transform: translateX(-50%) !important;
font-size: clamp(40px, 10.8vw, 44px) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* ===== PORTFOLIO PC — OVERVIEW overlaps TV bottom ===== */
@media (min-width: 1024px) {
.portfolio-main {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-top: clamp(35px, 0vw, 96px) !important;
}
.portfolio-detail {
width: min(88%, 960px) !important;
height: auto !important;
min-height: 196px !important;
margin-top: clamp(-60px, -4.5vw, -40px) !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
z-index: 4 !important;
}
.portfolio-detail__body {
height: auto !important;
min-height: 196px !important;
padding: clamp(18px, 1.8vw, 28px) clamp(22px, 2.4vw, 40px) !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
Sprint 2-2 Hotfix（追記のみ・既存ルールは未変更）
════════════════════════════════════════════════════════════════════════ */
/* [1] Portfolio「VIEW PROJECT」ボタン内の矢印・絵文字を完全非表示（保険）。
Sprint 2-3 で front-page.php の ↗ を削除 + wp-emoji 無効化済み。
しかしキャッシュされた旧HTML では ↗ が ![]()
に変換されて残る場合があるため、
span / img / svg / emoji クラス いずれも非表示にして完全封鎖する。
ボタン文言(テキストノード)・サイズ・位置・挙動・リンクは不変。 */
.integrated-page .portfolio-detail__link span,
.integrated-page .portfolio-detail__link img,
.integrated-page .portfolio-detail__link svg,
.integrated-page .portfolio-detail__link [class*="emoji"],
.integrated-page .portfolio-modal__link span,
.integrated-page .portfolio-modal__link img,
.integrated-page .portfolio-modal__link [class*="emoji"] {
display: none !important;
}
/* [2] SPヘッダーの管理バーoffsetは Sprint 2-3 で解除（revert）。
理由: 固定ヘッダーを 46px 下げると管理バー(46px)と合わせて上部占有が増えて見えたため。
公開SP表示は静的サイトと同一CSSで既に「想定」と一致しており、調整不要。
管理バーとの重なりはログイン中のみの WordPress ネイティブ挙動で、公開表示・PC/Tablet には影響しない。 */
/* ════════════════════════════════════════════════════════════════════════
Sprint 2-5 RC2: Launch QA 修正
════════════════════════════════════════════════════════════════════════ */
/* HERO WebM / PNG 切り替え
header.php の inline script が UA判定で body 描画前に no-webm クラスを付与する。
判定: iPhone/iPad/iPod + iPadOS13+(maxTouchPoints>1) + macOS Safari → no-webm
判定: Chrome / Firefox / Edge (非iOS) → WebM表示（クラスなし）
将来 HEVC alpha 対応時は .hero-video--hevc を追加し no-webm でも表示可に。 */
/* デフォルト: 動画表示・PNG非表示 */
.hero-video--fallback {
display: none;
width: 100%;
height: 100%;
object-fit: contain;
}
/* no-webm クラス時 (iOS / Safari): 動画非表示・PNG表示 */
html.no-webm .hero-video--webm { display: none; }
html.no-webm .hero-video--fallback { display: block; }
/* [RC2-2] ABOUTスタッフ名フォント — iOS Safari に Brush Script MT / Segoe Script は非搭載。
Dancing Script（Google Fonts 追加済み）を第1候補にすることで
iPhone 実機でも筆記体が正しく表示される。
PC/Mac では既存フォントが使われるため見た目は変わらない。 */
.about-staff-card p {
font-family: "Dancing Script", "Brush Script MT", "Segoe Script", cursive !important;
}
/* [RC2-3] SP テキスト改行改善 (max-width: 767px のみ、PC/Tablet に副作用なし)
日本語の長文が 1〜2 文字で折り返される問題を overflow-wrap / line-break で緩和。
word-break: keep-all は CJK を英単語扱いにして折り返し制御する。
セクションごとに影響範囲を絞り、既存レイアウト崩れを防ぐ。 */
@media (max-width: 767px) {
/* 全体: 長い連続文字列のはみ出しを防ぐ */
body {
overflow-wrap: break-word;
}
/* ABOUT コピー: 読点・句点前後の不自然な改行を抑制 */
.about-intro__copy {
line-break: strict;
overflow-wrap: break-word;
}
/* MESSAGE: 短い行・1文字折り返しを防ぐ */
/* Phase B(1.1.3) F-1: 実効の font-size は .integrated-page 側の
clamp(14px,4vw,17px)（specificity 上位）が使用される。ここでは
境界行（20字前後）が SP で溢れる副因の letter-spacing を 0 にする。 */
.message-section__text {
line-break: strict;
overflow-wrap: break-word;
font-size: clamp(15px, 4.5vw, 20px) !important;
letter-spacing: 0 !important;
}
/* PARTNER カード説明文 */
.top-partner-card__text,
.top-partner-card__description {
line-break: strict;
overflow-wrap: break-word;
}
/* CONTACT 注意文: br は既存ルールで display:none 済み。font-size 微調整 */
.contact-notice {
font-size: 12px !important;
line-height: 1.85 !important;
letter-spacing: .018em !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
Release 1.0.0 Hotfix: 固定ページ（Privacy Policy 等）最低限スタイル
════════════════════════════════════════════════════════════════════════ */
body.static-page {
background: var(--cream);
}
.page-main {
max-width: 840px;
margin: 0 auto;
padding: clamp(96px, 12vw, 160px) clamp(20px, 5vw, 40px) clamp(60px, 8vw, 100px);
background: var(--cream);
color: var(--black);
}
.page-main__title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
line-height: 1.3;
margin: 0 0 clamp(28px, 4vw, 48px);
}
.page-content {
font-size: 16px;
line-height: 1.9;
}
.page-content p { margin: 0 0 1.4em; }
.page-content h2 { font-size: 24px; font-weight: 800; margin: 1.6em 0 .8em; }
.page-content h3 { font-size: 19px; font-weight: 800; margin: 1.4em 0 .6em; }
.page-content ul,
.page-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.page-content a { color: var(--orange); text-decoration: underline; }
/* ════════════════════════════════════════════════════════════════════════
Release 1.0.0 Final Polish: Contact Form 7 デザイン統合
CF7 の既定クラス（wpcf7-*）にスタイルを当てる。CF7 側テンプレート・
front-page.php の HTML 構造は変更しない（CSSのみで統合）。
既存ネイティブフォーム（.contact-form 系）と同じトーンに揃える。
════════════════════════════════════════════════════════════════════════ */
.contact-section .wpcf7 {
width: min(100%, 680px);
margin: 0 auto;
text-align: center;
}
.contact-section .wpcf7-form {
display: grid;
/* R-29: 暗黙のグリッド列は min-width:auto のため、入力欄・[acceptance]（white-space:nowrap）
の min-content 幅にトラックが引っ張られ、SP幅でフォームがコンテナ（.wpcf7 = min(100%,680px)）
を超えて .contact-section{overflow:hidden} にクリップされていた。列を minmax(0,1fr) に固定して
ブローアウトを止める。PC幅ではトラックが従来どおり 1fr=全幅に解決されるため見た目は不変。 */
grid-template-columns: minmax(0, 1fr);
gap: clamp(10px, 1.3vw, 16px);
}
/* CF7 の既定テンプレートは各項目が （見出しテキスト +
+ 入力欄 + 補足）
の構成になっている場合がある。display:grid は
/裸テキストとの相性が悪く
意図しない改行崩れを起こすため通常のブロックフロー + margin で余白を作る。 */
.contact-section .wpcf7-form p {
margin: 0 0 clamp(10px, 1.3vw, 16px);
text-align: center;
color: var(--contact-cream);
font-size: clamp(15px, 1.6vw, 20px);
font-weight: 800;
line-height: 1.7;
letter-spacing: .04em;
}
.contact-section .wpcf7-form p:last-of-type {
margin-bottom: 0;
}
.contact-section .wpcf7-form label {
display: grid;
gap: clamp(10px, 1.1vw, 14px);
color: var(--contact-cream);
font-size: clamp(16px, 1.9vw, 26px);
line-height: 1.25;
font-weight: 950;
letter-spacing: .06em;
}
.contact-section .wpcf7-form-control-wrap {
display: block;
width: 100%;
margin-top: clamp(8px, 1.1vw, 12px);
}
.contact-section .wpcf7-form-control.wpcf7-text,
.contact-section .wpcf7-form-control.wpcf7-email,
.contact-section .wpcf7-form-control.wpcf7-tel,
.contact-section .wpcf7-form-control.wpcf7-textarea {
width: 100%;
border: 0;
border-radius: 12px;
background: var(--contact-cream);
color: var(--contact-black);
font: inherit;
font-size: clamp(13px, 1.1vw, 16px);
font-weight: 700;
text-align: left; /* 親
の text-align:center を上書き（入力文字は左揃え） */
padding: 0 1em;
outline: none;
box-shadow: none;
transition: box-shadow .16s ease, transform .16s ease;
}
.contact-section .wpcf7-form-control.wpcf7-text,
.contact-section .wpcf7-form-control.wpcf7-email,
.contact-section .wpcf7-form-control.wpcf7-tel {
height: clamp(44px, 3.8vw, 56px);
}
.contact-section .wpcf7-form-control.wpcf7-textarea {
min-height: clamp(140px, 14vw, 200px);
resize: vertical;
padding-top: .9em;
padding-bottom: .9em;
}
.contact-section .wpcf7-form-control.wpcf7-text:focus,
.contact-section .wpcf7-form-control.wpcf7-email:focus,
.contact-section .wpcf7-form-control.wpcf7-tel:focus,
.contact-section .wpcf7-form-control.wpcf7-textarea:focus {
box-shadow: 0 0 0 4px rgba(236,159,50,.95);
transform: translateY(-1px);
}
/* プライバシー同意（[acceptance]） */
.contact-section .wpcf7-form .wpcf7-acceptance {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: .4em;
width: fit-content;
max-width: 100%;
margin: 0 auto;
color: var(--contact-cream);
font-size: clamp(12px, 1.05vw, 15px);
line-height: 1.3;
font-weight: 800;
letter-spacing: .03em;
cursor: pointer;
white-space: nowrap;
}
.contact-section .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
display: inline-flex;
align-items: center;
gap: .4em;
}
/* .wpcf7-form label（見出しラベル用の汎用ルール）が、同意チェックボックス自身の
内部