.main{
width: calc(100% - 88px);
background-color: var(--color-white);
position: relative;
}
.main::before{
content: "";
position: absolute;
inset: 0;
background-image: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/noise-bg.svg);
background-repeat: repeat;
opacity: 0.1;
pointer-events: none;
}
.main.-low{
width: 100%;
}
@media (max-width:767px) {
.main{
width: 100%;
}
}  .c-heading.-page_typeA{
width: var(--content-width-small);
margin-inline: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.c-heading.-page_typeA>.ttl{
padding-left: 18px;
margin-left: 8px;
margin-bottom: var(--px-40);
font-size: var(--font-18);
font-weight: 700;
position: relative;
}
.c-heading.-page_typeA>.ttl::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: var(--color-blue);
width: 9px;
height: 9px;
aspect-ratio: 1 / 1;
border-radius: 8px;
}
.c-heading.-page_typeA>.en{
color: var(--color-black);
font-family: var(--font-din);
font-size: var(--font-160);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: var(--px-48);
}
.c-heading.-page_typeA>.list{
display: flex;
flex-wrap: wrap;
gap: var(--px-25);
}
.c-heading.-page_typeA>.list>.item>.link{
display: flex;
gap: 12px;
font-size: var(--font-14);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
text-decoration-line: underline;
}
@media (max-width:767px) {
.c-heading.-page_typeA>.ttl{
margin-bottom: 10px;
}
}
@media (max-width:560px) {
.c-heading.-page_typeA>.en{
font-size: var(--font-120);
}
.c-heading.-page_typeA>.list{
padding-left: 10px;
}
} .c-heading.-typeA{
width: 100%;
display: flex;
align-items: baseline;
gap: var(--px-40);
margin-bottom: var(--px-55);
}
.c-heading.-typeA > .en-ttl{
font-size: var(--font-120);
font-weight: 400;
font-family: var(--font-din);
letter-spacing: -0.015em;
position: relative;
overflow: hidden;
}
.c-heading.-typeA > .en-ttl::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 101%;
height: 100%;
background: var(--color-black);
transform: translateX(-1%);
transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1);
}
.c-heading.-typeA > .en-ttl.active::before{
transform: translateX(101%);
}
.c-heading.-typeA > .ttl{
font-size: var(--font-18);
font-weight: 700;
position: relative;
padding-left: 18px;
}
.c-heading.-typeA > .ttl.-en{
font-family: var(--font-din);
font-size: var(--font-24);
font-weight: 700;
}
.c-heading.-typeA > .ttl::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: var(--color-blue);
border-radius: 8px;
width: 9px;
height: 9px;
aspect-ratio: 1/1;
}
@media (max-width:767px) {
.c-heading.-typeA{
flex-direction: column;
gap: var(--px-20);
}
.c-heading.-typeA > .ttl{
padding-left: 1.5em;
}
.c-heading.-typeA > .ttl::before{
left: .5em;
}
} .c-heading.-typeB{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--px-15);
margin-bottom: var(--px-55);
}
.c-heading.-typeB>.ttl{
text-align: center;
font-size: var(--font-44);
font-weight: 700;
letter-spacing: -0.02em;
}
.c-heading.-typeB>.en-ttl{
color: var(--color-blue);
font-family: var(--font-din);
font-size: var(--font-16);
font-weight: 400;
letter-spacing: 0.02em;
} .c-name{
position: relative;
}
.c-name>.post{
position: absolute;
bottom: 42px;
left: 0;
}
.c-name>.post>p{
color: var(--color-white);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
display: inline;
background-color: var(--color-black);
padding: 4px 8px;
}
.c-name>.name{
position: absolute;
bottom: 1px;
left: 0;
}
.c-name>.name>p{
color: var(--color-white);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.042em;
display: inline;
background-color: var(--color-black);
padding: 4px 8px;
} .page-header{
width: 100%;
height: 100%;
margin-bottom: 1em;
}
.page-header.-works{
width: 100%;
height: max(626px, 60svh);
overflow: hidden;
margin-bottom: 0;
}
.page-header>.content{
position: relative;
overflow: hidden;
}
.page-header.-works>.content{
height: 100%;
min-height: 60svh;
}
.page-header>.content>.media{
position: relative;
z-index: 0;
display: flex;
justify-content: flex-end;
margin-left: auto;
}
.page-header>.content>.media>img{
position: relative;
right: -1%;
object-fit: cover;
flex-basis: 50%;
max-width: 100%;
width: 100%;
}
.page-header.-works>.content>.media{
height: max(626px, 60svh);
}
.page-header.-works>.content>.media>img{
height: 100%;
min-height: 60svh;
}
@media (max-width:767px) {
.page-header.-works{
height: 100%;
}
.page-header.-works>.content{
min-height: auto;
}
.page-header.-works>.content>.media{
height: auto;
}
.page-header.-works>.content>.media>img{
height: auto;
min-height: auto;
}
} .section>.inner{
padding-block: var(--px-132) var(--px-200);
}
@media (max-width:767px) {
.section>.inner{
padding-block: var(--px-110) var(--px-100);
}
} .section.-message{
border-bottom: 1px solid var(--color-gray);
}
.section.-message>.inner{
width: var(--content-width-small);
margin-inline: auto;
padding-block: 0 var(--px-200);
}
.section.-message>.inner>.flx{
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: clamp(10px, 2.6666666667vw, 48px);
}
.section.-message>.inner>.flx>.media,
.section.-message>.inner>.flx>.content>.media{
position: relative;
z-index: 0;
}
.section.-message>.inner>.flx>.content>.media{
width: min(480px,100%);
margin-inline: auto;
margin-block: var(--px-55) 8px;
}
.section.-message>.inner>.flx>.media::before{
content: "";
position: absolute;
top: 8px;
left: 8px;
background-color: var(--color-black);
width: 100%;
height: 100%;
z-index: -1;
}
.section.-message>.inner>.flx>.content>.media::before{
content: "";
position: absolute;
top: 8px;
left: 8px;
background-color: var(--color-black);
width: 100%;
height: 100%;
z-index: -1;
}
.section.-message>.inner>.flx>.content{
width: min(591px,100%);
}
.section.-message>.inner>.flx>.content>.copy{
display: inline;
}
.section.-message>.inner>.flx>.content>.copy>p{
color: var(--color-white);
font-size: var(--font-56);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
display: inline;
padding: 12px 16px;
background-color: var(--color-black);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.char-animation {
display: inline-block;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.char-animation.active {
opacity: 1;
}
.break-animation {
display: inline-block;
opacity: 0;
}
.break-animation.active {
opacity: 1;
}
.section.-message>.inner>.flx>.content>.txt{
margin-block: var(--px-55) 8px;
font-size: var(--font-17);
font-weight: 700;
line-height: 2.4;
}
.section.-message>.inner>.flx>.content>.item{
margin-top: var(--px-48);
}
.section.-message>.inner>.flx>.content>.item>.ttl{
font-size: var(--font-24);
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.02em;
border-bottom: 1px solid var(--color-black);
display: inline-flex;
align-items: center;
gap: 5px;
}
.section.-message>.inner>.flx>.content>.item>.ttl>.number{
color: var(--color-blue);
font-size: var(--font-30);
font-weight: 700;
font-family: var(--font-din);
}
.section.-message>.inner>.flx>.content>.item>.ttl>.bg{
color: var(--color-white, #FFF);
font-size: var(--font-24);
font-weight: 700;
line-height: 1.4;
background-color: var(--color-black);
letter-spacing: -0.02em;
padding-inline: 5px;
}
.section.-message>.inner>.flx>.content>.item>.txt{
margin-top: 1em;
font-size: var(--font-16);
font-weight: 700;
line-height: 2;
}
.section.-message>.inner>.flx>.content>.note{
margin-top: 1.2em;
font-size: var(--font-14);
font-weight: 500;
line-height: 2;
}
.section.-message>.inner>.flx>.media>.post>p{
font-size: var(--font-16);
}
.section.-message>.inner>.flx>.content>.media.-sp>.post>p{
font-size: var(--font-16);
}
.section.-message>.inner>.flx>.media>.name>p{
font-size: var(--font-34);
}
.section.-message>.inner>.flx>.content>.media.-sp>.name>p{
font-size: var(--font-34);
}
@media (max-width:1000px) {
.section.-message>.inner>.flx{
flex-direction: column;
align-items: center;
}
.section.-message>.inner>.flx>.content{
width: 100%;
}
}
@media (max-width:767px) {
.section.-message>.inner{
padding-block: 0 var(--px-100);
}
}
@media (max-width:560px) {
.section.-message>.inner>.flx>.content>.item>.ttl{
font-size: var(--font-18);
}
.section.-message>.inner>.flx>.content>.copy>p{
padding-inline: 5px;
}
} .section.-feature>.inner{
width: var(--content-width-small);
margin-inline: auto;
}
.section.-feature>.inner>.list{
padding-bottom: var(--px-80);
}
.section.-feature>.inner>.list>.item{
display: flex;
justify-content: center;
align-items: center;
gap: clamp(30px, 5vw, 90px);
}
.section.-feature>.inner>.list>.item.-reverse{
flex-direction: row-reverse;
}
.section.-feature>.inner>.list>.item+.item{
margin-top: var(--px-55);
}
.section.-feature>.inner>.list>.item>.media,
.section.-feature>.inner>.list>.item>.content{
flex-basis: 50%;
max-width: 50%;
}
.section.-feature>.inner>.list>.item>.media{
position: relative;
}
.section.-feature>.inner>.list>.item>.media>.number{
position: absolute;
top: -20px;
left: -9px;
color: var(--color-white);
font-family: var(--font-din);
font-size: var(--font-160);
letter-spacing: -0.02em;
}
.section.-feature>.inner>.list>.item.-reverse>.media>.number{
right: 0;
left: unset;
}
.section.-feature>.inner>.list>.item>.media>img{
width: 512px;
height: 440px;
object-fit: cover;
}
.section.-feature>.inner>.list>.item>.content>.ttl{
font-size: var(--font-34);
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.02em;
padding-bottom: var(--px-32);
margin-bottom: var(--px-32);
position: relative;
}
.section.-feature>.inner>.list>.item>.content>.ttl::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 1px;
background: var(--color-blue);
}
.section.-feature>.inner>.list>.item>.content>.txt{
font-size: var(--font-16);
font-weight: 700;
line-height: 2.2;
}
@media (max-width:767px) {
.section.-feature>.inner>.list{
margin-bottom: 30px;
}
.section.-feature>.inner>.list>.item{
flex-direction: column;
}
.section.-feature>.inner>.list>.item.-reverse{
flex-direction: column;
}
.section.-feature>.inner>.list>.item>.media>.number{
top: -15px;
}
.section.-feature>.inner>.list>.item>.media,
.section.-feature>.inner>.list>.item>.content{
flex-basis: 100%;
max-width: 100%;
}
.section.-feature>.inner>.list>.item>.media>img{
width: 100%;
height: auto;
}
} .section.-member{
background-color: var(--color-white-b);
}
.section.-member>.inner{
width: var(--content-width-small);
margin-inline: auto;
position: relative;
}
.section.-member>.inner>.deco{
position: absolute;
top: -35px;
right: 0;
display: inline-flex;
align-items: flex-start;
flex-direction: row-reverse;
}
.section.-member>.inner>.deco>.txt{
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
color: var(--color-white);
font-size: var(--font-48);
font-weight: 700;
letter-spacing: 0.073em;
padding: 8px;
background-color: var(--color-black);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
margin: 0;
}
.section.-member>.inner>.list{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--px-32);
}
.section.-member>.inner>.list>.item>.media>img{
width: 100%;
}
.section.-member>.inner>.list>.item>.media>.post{
bottom: 37px;
}
.section.-member>.inner>.list>.item>.media>.post>p{
font-size: 13px;
}
.section.-member>.inner>.list>.item>.media>.name>p{
font-size: 28px;
}
.section.-member>.inner>.list>.item>.content{
margin-top: 1em;
}
.section.-member>.inner>.list>.item>.content>.txt{
line-height: 2;
}
.section.-member>.inner>.list>.item>.content>.sub-txt{
line-height: 1.6;
}
.section.-member>.inner>.list>.item>.content>p>span{
font-weight: 700;
border-bottom: 1px solid var(--color-black);
letter-spacing: -0.032em;
font-size: var(--font-15);
}
@media (max-width:960px) {
.section.-member>.inner>.list{
grid-template-columns: repeat(3,1fr);
}
}
@media (max-width:560px) {
.section.-member>.inner>.list{
grid-template-columns: repeat(2,1fr);
}
} .section.-overview>.inner{
width: var(--content-width-small);
margin-inline: auto;
position: relative;
}
.section.-overview>.inner>.body>.list>.item{
display: flex;
align-items: flex-start;
gap: var(--px-40);
border-bottom: 1px solid var(--color-gray);
padding-block: var(--px-24);
}
.section.-overview>.inner>.body>.list>.item>dt{
width: min(200px,100%);
}
.section.-overview>.inner>.body>.list>.item>dt>span{
display: block;
background: var(--color-black);
color: var(--color-white);
line-height: 1.8;
text-align: center;
}
.section.-overview>.inner>.body>.list>.item>dd{
width: calc(100% - 200px);
flex: 1 0 0;
font-size: var(--font-16);
font-weight: 700;
line-height: 1.8;
letter-spacing: -0.02em;
}
@media (max-width:560px) {
.section.-overview>.inner>.body>.list>.item{
flex-direction: column;
border-bottom: none;
gap: 10px;
}
.section.-overview>.inner>.body>.list>.item>dt{
width: 100%;
}
.section.-overview>.inner>.body>.list>.item>dd{
width: 100%;
}
} .section.-hero{
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/service-hero.jpg) center right/cover;
position: relative;
z-index: 0;
}
.section.-hero::before{
content: "";
position: absolute;
inset: 0;
background-color: #000;
opacity: 0.75;
width: 100%;
height: 100%;
z-index: -1;
}
.section.-hero>.inner{
width: var(--content-width-small);
margin-inline: auto;
}
.section.-hero>.inner>.content>.copy{
margin-bottom: var(--px-80);
}
.section.-hero>.inner>.content>.copy>p{
color: var(--color-white);
font-size: var(--font-70);
font-weight: 700;
letter-spacing: -0.043em;
line-height: 1.3;
}
.section.-hero>.inner>.content>.txt>p{
display: inline;
background-color: var(--color-white);
padding: 5px 12px;
line-height: 2;
font-size: var(--font-17);
font-weight: 700;
letter-spacing: -0.02em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.section.-hero>.deco{
position: absolute;
bottom: -1px;
left: 0;
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/service-deco.png) center center /cover;
width: 539.795px;
height: 177.001px; 
}
@media (max-width:767px) {
.section.-hero>.inner>.content>.copy>p{
font-size: var(--font-50);
}
}
@media (max-width:560px) {
.section.-hero>.inner>.content>.txt>p{
padding: 5px;
}
.section.-hero>.inner>.content>.copy>p{
font-size: var(--font-40);
}
.section.-hero>.inner>.content>.copy{
margin-bottom: 30px;
}
} .section.-service>.inner{
width: var(--content-width-small);
margin-inline: auto;
}
.section.-service>.inner>.list>.item{
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--px-80);
}
.section.-service>.inner>.list>.item+.item{
margin-top: var(--px-120);
}
.section.-service>.inner>.list>.item>.body{
width: min(420px,100%);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section.-service>.inner>.list>.item>.body>.content{
margin-block: var(--px-45) var(--px-120);
}
.section.-service>.inner>.list>.item>.body>.content.-bnr{
margin-block: var(--px-45) var(--px-80);
}
@media (hover : hover) { 
.section.-service>.inner>.list>.item>.body>.bnr>.link:hover{
opacity: 0.65;
}
}
.section.-service>.inner>.list>.item>.body>.content>.deco{
color: var(--color-blue);
font-family: var(--font-din);
font-size: var(--font-16);
padding-left: 15px;
position: relative;
margin-bottom: var(--px-20);
}
.section.-service>.inner>.list>.item>.body>.content>.deco::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: var(--color-blue);
width: 6px;
height: 6px;
aspect-ratio: 1 / 1;
border-radius: 8px;
}
.section.-service>.inner>.list>.item>.body>.content>.ttl{
font-size: var(--font-40);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
margin-bottom: var(--px-24);
padding-bottom: var(--px-24);
position: relative;
}
.section.-service>.inner>.list>.item>.body>.content>.ttl::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 1px;
background-color: var(--color-black);
}
.section.-service>.inner>.list>.item>.body>.content>.txt{
font-size: var(--font-16);
font-weight: 700;
line-height: 2.2;
}
.section.-service>.inner>.list>.item>.body>.bnr>a>img{
width: 100%;
}
.section.-service>.inner>.list>.item>.slider{
width: min(624px,100%);
}  .main-slider {
margin-bottom: 15px;
overflow: hidden;
}
.main-slider .splide__slide img {
width: 624px;
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .thumbnail-slider .splide__slide {
opacity: 0.6;
cursor: pointer;
transition: opacity 0.3s ease;
overflow: hidden;
aspect-ratio: 150 / 104;
}
.thumbnail-slider .splide__slide.is-active {
opacity: 1;
}
.thumbnail-slider .splide__slide img {
width: 150px;
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .splide__arrow {
background: var(--color-white);
width: 32px;
height: 32px;
border-radius: 50%;
opacity: 1;
border: 1px solid var(--color-gray);
}
.splide__arrow svg {
fill: var(--color-black);
width: 12px;
height: 12px;
}
.splide__arrow--prev{
left: -1em;
}
.splide__arrow--next{
right: -1em;
}
.splide__arrow:hover:not(:disabled){
opacity: 1;
}
@media (max-width:1200px) {
.section.-service>.inner>.list>.item>.slider{
width: 50%;
}
}
@media (max-width:960px) {
.section.-service>.inner>.list>.item{
flex-direction: column;
gap: 30px;
}
.section.-service>.inner>.list>.item>.body{
width: 100%;
}
.section.-service>.inner>.list>.item>.body>.content{
margin-bottom: 0;
}
.section.-service>.inner>.list>.item>.body>.content.-bnr{
margin-bottom: 0;
}
.section.-service>.inner>.list>.item>.slider{
width: 100%;
}
.section.-service>.inner>.list>.item>.slider>.bnr>a>img{
width: 100%;
}
.main-slider .splide__slide img{
width: 100%;
}
.slider>.thumbnail-slider{
margin-bottom: 30px;
}
.section.-hero>.deco{
width: 100%;
z-index: -1;
}
.splide__arrow--prev{
left: -.5em;
}
.splide__arrow--next{
right: -.5em;
}
} .service-footer-media{
position: relative;
margin-bottom: var(--px-40);
width: 95%;
margin-inline: auto;
}
.service-footer-media>.service-footer-slider{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin: 8px 0;
display: flex;
}
.service-footer-media>.service-footer-slider>.slider-track.-top{
display: flex;
height: 100%;
-webkit-animation: infinity-scroll-top--tate 50s infinite linear 0.5s both;
animation: infinity-scroll-top--tate 50s infinite linear 0.5s both;
}
@keyframes infinity-scroll-top--tate{
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
.service-footer-media>.service-footer-slider>.slider-track.-bottom{
display: flex;
height: 100%;
-webkit-animation: infinity-scroll-bottom--tate 50s infinite linear 0.5s both;
animation: infinity-scroll-bottom--tate 50s infinite linear 0.5s both;
}
@keyframes infinity-scroll-bottom--tate{
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.service-footer-media>.service-footer-slider>.slider-track>.item{
height: 100%;
width: 520px;
aspect-ratio: 65/42;
object-fit: cover;
flex-shrink: 0;
margin-right: 8px;
}
.service-footer-media>.deco{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1200px,90%);
z-index: 0;
}
.service-footer-media>.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
}
.service-footer-media>.content>h2{
text-align: center;
}
@media (max-width:960px) {
.service-footer-media>.service-footer-slider>.slider-track>.item{
width: 200px;
}
}
@media (max-width:560px) {
.service-footer-media{
margin-bottom: 5px;
}
} svg .svg-elem-1.-service {
fill: transparent;
-webkit-transition: fill .5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s;
transition: fill .5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s;
}
svg.active .svg-elem-1.-service {
fill: rgb(255, 255, 255);
} svg .svg-elem-1.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0s;
transition: fill 0.5s ease-in-out 0s;
}
svg.active-service-ttl .svg-elem-1.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-2.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.1s;
transition: fill 0.5s ease-in-out 0.1s;
}
svg.active-service-ttl .svg-elem-2.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-3.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.2s;
transition: fill 0.5s ease-in-out 0.2s;
}
svg.active-service-ttl .svg-elem-3.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-4.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.30000000000000004s;
transition: fill 0.5s ease-in-out 0.30000000000000004s;
}
svg.active-service-ttl .svg-elem-4.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-5.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.4s;
transition: fill 0.5s ease-in-out 0.4s;
}
svg.active-service-ttl .svg-elem-5.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-6.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.5s;
transition: fill 0.5s ease-in-out 0.5s;
}
svg.active-service-ttl .svg-elem-6.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-7.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.6000000000000001s;
transition: fill 0.5s ease-in-out 0.6000000000000001s;
}
svg.active-service-ttl .svg-elem-7.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-8.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.7000000000000001s;
transition: fill 0.5s ease-in-out 0.7000000000000001s;
}
svg.active-service-ttl .svg-elem-8.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-9.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.8s;
transition: fill 0.5s ease-in-out 0.8s;
}
svg.active-service-ttl .svg-elem-9.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-10.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 0.9s;
transition: fill 0.5s ease-in-out 0.9s;
}
svg.active-service-ttl .svg-elem-10.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-11.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1s;
transition: fill 0.5s ease-in-out 1s;
}
svg.active-service-ttl .svg-elem-11.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-12.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.1s;
transition: fill 0.5s ease-in-out 1.1s;
}
svg.active-service-ttl .svg-elem-12.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-13.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.2000000000000002s;
transition: fill 0.5s ease-in-out 1.2000000000000002s;
}
svg.active-service-ttl .svg-elem-13.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-14.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.3s;
transition: fill 0.5s ease-in-out 1.3s;
}
svg.active-service-ttl .svg-elem-14.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-15.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.4000000000000001s;
transition: fill 0.5s ease-in-out 1.4000000000000001s;
}
svg.active-service-ttl .svg-elem-15.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-16.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.5s;
transition: fill 0.5s ease-in-out 1.5s;
}
svg.active-service-ttl .svg-elem-16.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-17.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.6s;
transition: fill 0.5s ease-in-out 1.6s;
}
svg.active-service-ttl .svg-elem-17.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-18.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.7000000000000002s;
transition: fill 0.5s ease-in-out 1.7000000000000002s;
}
svg.active-service-ttl .svg-elem-18.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-19.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.8s;
transition: fill 0.5s ease-in-out 1.8s;
}
svg.active-service-ttl .svg-elem-19.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-20.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 1.9000000000000001s;
transition: fill 0.5s ease-in-out 1.9000000000000001s;
}
svg.active-service-ttl .svg-elem-20.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-21.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 2s;
transition: fill 0.5s ease-in-out 2s;
}
svg.active-service-ttl .svg-elem-21.service-ttl {
fill: rgb(26, 119, 199);
}
svg .svg-elem-22.service-ttl {
fill: transparent;
-webkit-transition: fill 0.5s ease-in-out 2.1s;
transition: fill 0.5s ease-in-out 2.1s;
}
svg.active-service-ttl .svg-elem-22.service-ttl {
fill: rgb(26, 119, 199);
}  .c-heading.-page_typePost{
width: var(--content-width-small);
margin-inline: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.c-heading.-page_typePost>.en{
padding-left: 18px;
margin-left: 8px;
margin-bottom: var(--px-30);
font-size: var(--font-18);
font-family: var(--font-din);
font-weight: 700;
position: relative;
letter-spacing: 0.02em;
}
.c-heading.-page_typePost>.en::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: var(--color-blue);
width: 9px;
height: 9px;
aspect-ratio: 1 / 1;
border-radius: 8px;
}
.c-heading.-page_typePost>.ttl{
color: var(--color-black);
font-size: var(--font-48);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
margin-bottom: var(--px-20);
}
.c-heading.-page_typePost>.category{
display: flex;
gap: 8px;
}
.c-heading.-page_typePost>.category>.item>.link{
background-color: var(--color-black);
color: var(--color-white);
padding: 5px 6px;
font-size: var(--font-13);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
}
@media (max-width:767px) {
.c-heading.-page_typePost>.ttl{
font-size: 28px;
}
} .page-container>.body.-works{
background: var(--color-white-b);
}
.other-container.-works{
max-width: calc(100% - 88px);
width: 960px;
margin-inline: auto;
transform: translateY(-100px);
padding-bottom: var(--px-50);
}
.other-container.-works.-large{
width: var(--content-width-medium);
}
.other-container.-works > .section + .section {
margin-top: var(--px-80);
}
.other-container.-complete{
padding: 0 0 var(--px-200);
}
.other-container > .section {
max-width: var(--content-width-medium);
margin-inline: auto;
}
.other-container > .section + .section {
margin-top: var(--px-80);
}
.other-container > .section.-w-small {
max-width: var(--content-width-small);
}
.other-container > .section.-w-large {
max-width: var(--content-width-large);
}
.other-container > .section.-w-fluid {
max-width: none;
}
.other-container > .section.-mt-small {
margin-top: var(--px-40);
}
@media (max-width:767px) {
.other-container.-works{
width: 95vw;
max-width: 100%;
transform: translateY(0);
}
} .c-termList {
display: flex;
justify-content: center;
align-items: center;
gap: 2.8em;
font-size: var(--font-16);
line-height: 1.4;
}
.c-termList > .header {
flex: 0 0 auto;
font-size: var(--font-26);
line-height: 1;
color: var(--color-black);
font-family: var(--font-din);
font-weight: 600;
letter-spacing: 0.031em;
}
.c-termList > .body {
flex: 0 1 auto;
}
.c-termList > .body > .list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8em 0;
min-height: 4em;
padding: 1em 2.6em;
background: var(--color-black);
color: var(--color-white);
}
.c-termList > .body > .list > .item:not(:last-child)::after {
opacity: 0.3;
margin-inline: 1.2em;
content: "|";
}
.c-termList > .body > .list > .item > .link {
transition: color var(--transition-duration) ease;
}
.c-termList.-gradient > .body > .list {
background: var(--color-blue);
}
.c-termList > .body > .list.-child {
position: relative;
padding-left: 6em;
background: var(--color-black);
color: var(--color-blue);
}
.c-termList > .body > .list.-child::before {
content: "";
position: absolute;
inset: 50% auto auto 2.8em;
width: 1em;
aspect-ratio: 1/1;
background: currentColor;
-webkit-mask: var(--icon-arrow-d-right) no-repeat 50%/contain;
mask: var(--icon-arrow-d-right) no-repeat 50%/contain;
transform: translateY(-50%);
}
.c-termList > .body > .list > .item > .link:is(:hover, .-current) {
text-decoration: underline;
}
.c-termList > .body > .list.-child > .item > .link:is(:hover, .-current) {
text-decoration: underline;
}
.c-formControl {
box-sizing: border-box;
display: block;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
line-height: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-formControl:disabled {
cursor: not-allowed;
}
.c-formControl::-moz-placeholder {
opacity: 0.4;
}
.c-formControl::placeholder {
opacity: 0.4;
}
textarea.c-formControl {
resize: vertical;
}
select.c-formControl {
padding-right: 2em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3e%3cpath fill='%23343a40' d='M15 22L0 0h30z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: calc(100% - 0.75em) 50%;
background-size: 0.5em auto;
}
select.c-formControl[multiple], select.c-formControl[size]:not([size="1"]) {
background-image: none;
}
.c-formControl.-auto {
display: inline-block;
width: auto;
}
.c-formControl {
padding: 0.8em 1em;
background: var(--color-white-b);
border: 1px solid var(--color-gray);
font-size: var(--font-16);
line-height: 1.6;
}
.c-formControl.-typeArchive {
width: 15em;
} .c-article > .footer {
margin-top: var(--px-80);
}
.c-article > .footer > .item + .item {
margin-top: var(--px-30);
}
.c-article > .footer > .item > .date {
font-size: var(--font-14);
letter-spacing: 0.04em;
text-align: right;
}
.c-article > .header > .date.-single-works {
text-align: left;
} .c-article>.body>.media{
margin-bottom: var(--px-80);
}
.c-article>.body>.media>img{
object-fit: cover;
aspect-ratio: 3 / 2;
} .c-article>.body>.before-after{
padding-block: var(--px-48);
border-bottom: 1px dashed var(--color-black);
}
.c-article>.body>.before-after>.list{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.before-after.single-image>.list {
justify-content: center !important;
}
.c-article>.body>.before-after>.list>.item>.media{
position: relative;
}
.before-after.single-image>.list>.item>.media>img{
width: 100%;
max-width: 100%;
}
.c-article>.body>.before-after>.list>.item>.media>.deco{
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.c-article>.body>.before-after>.list>.item>.media>.deco.-before{
background-color: var(--color-black);
}
.c-article>.body>.before-after>.list>.item>.media>.deco.-after{
background-color: var(--color-blue);
}
.c-article>.body>.before-after>.list>.item>.media>.deco>.txt{
color: var(--color-white);
font-family: var(--font-din);
font-size: var(--font-22);
font-weight: 700;
letter-spacing: 0.08em;
}
@media (max-width:560px) {
.c-article>.body>.before-after>.list{
flex-direction: column;
}
.c-article>.body>.before-after>.list>.c-icon.-arrow-works::before{
transform: rotate(90deg);
}
.c-article>.body>.before-after>.list>.item>.media>img{
width: 100%;
}
} .gallery-section {
padding-block: var(--px-80) var(--px-35);
position: relative;
border-bottom: 1px dashed var(--color-black);
}
.gallery-section>.note{
font-size: var(--font-16);
margin-bottom: 1em;
}
.gallery-section>.gallery-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--px-24);
list-style: none;
padding: 0;
margin: 0;
}
.gallery-section>.gallery-list>.gallery-item {
position: relative;
overflow: hidden;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container {
position: relative;
overflow: hidden;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-media {
width: 100%;
height: 100%;
aspect-ratio: 304.00/213.62;
overflow: hidden;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-media>img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-overlay>.gallery-full-view-btn {
background: transparent;
color: var(--color-white);
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: var(--font-16);
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-din);
letter-spacing: 0.05em;
font-weight: 700;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-overlay>.gallery-full-view-btn>.c-icon.-circle.-white::after{
border: 1px solid rgba(255, 255, 255, 0.65);
width: 2em;
height: 2em;
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container>.gallery-overlay>.gallery-full-view-btn>.gallery-plus-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border: 1px solid var(--color-white);
border-radius: 50%;
font-size: 18px;
font-weight: 300;
} .gallery-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.gallery-modal>.gallery-modal-content {
position: relative;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-modal>.gallery-modal-content>.media{
position: relative;
width: 1200px;
max-width: 100%;
}
.gallery-modal>.gallery-modal-content>.media>.gallery-close-modal {
position: absolute;
top: 0;
right: 0;
color: var(--color-white);
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transform: translate(20px,-45px);
transition: opacity 0.3s ease;
}
.gallery-modal>.gallery-modal-content>.media>.gallery-modal-img {
width: 100%;
max-width: 1200px;
max-height: 80vh;
object-fit: cover;
position: relative;
} .gallery-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--color-black);
color: var(--color-white);
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
z-index: 10002;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-20);
font-weight: bold;
transition: background-color 0.3s ease, opacity 0.3s ease;
}
.gallery-prev-btn {
left: -24px;
}
.gallery-next-btn {
right: -24px;
}
.gallery-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
} .gallery-counter {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.6);
color: var(--color-white);
padding: 8px 16px;
border-radius: 20px;
font-size: var(--font-14);
z-index: 10002;
font-family: var(--font-din);
white-space: nowrap;
}
@media (hover : hover) { 
.gallery-section>.gallery-list>.gallery-item>.gallery-container:hover>.gallery-media>img {
transform: scale(1.05);
}
.gallery-section>.gallery-list>.gallery-item>.gallery-container:hover>.gallery-overlay {
opacity: 1;
}
.gallery-modal>.gallery-modal-content>.media>.gallery-close-modal:hover {
opacity: 0.7;
}
}
@media (max-width: 768px) {
.gallery-section>.gallery-list {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.gallery-counter {
bottom: -35px;
font-size: 12px;
padding: 6px 12px;
}
.gallery-modal>.gallery-modal-content>.media>.gallery-close-modal {
width: 40px;
height: 40px;
font-size: 30px;
transform: translate(15px,-35px);
}
}
@media (max-width:560px) {
.gallery-nav-btn{
width: 30px;
height: 30px;
font-size: 18px;
}
.gallery-prev-btn {
left: -15px;
}
.gallery-next-btn {
right: -15px;
}
} .conn{
background-color: var(--color-white);
}
.conn>.inner{
width: var(--content-width-medium);
margin-inline: auto;
padding-block: var(--px-70) var(--px-100);
} .dotcon-bnr{
background-color: var(--color-white-b);
padding-block: var(--px-65);
}
.dotcon-bnr>.media{
width: min(800px,95vw);
margin-inline: auto;
} .c-gutenberg {
--c-gutenberg-elem-gap: 1lh;
--c-gutenberg-a-color: var(--color-red);
--c-gutenberg-wp-element-caption-margin-top: .8em;
--c-gutenberg-wp-element-caption-font-size: var(--font-16);
--c-gutenberg-wp-element-caption-line-height: 1.6;
--c-gutenberg-wp-element-caption-color: var(--color-gray-dark);
}
.c-gutenberg {
display: block;
margin: 0;
padding: 0 0 var(--px-80);
font: inherit;
line-height: 1;
text-align: justify;
word-break: break-all;
overflow-wrap: break-word;
color: inherit;
border-bottom: 1px dashed var(--color-black);
}
.c-gutenberg :where(hr) {
border: none;
border-top: 1px solid currentColor;
color: inherit;
}
.c-gutenberg :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font: inherit;
line-height: inherit;
color: inherit;
}
.c-gutenberg :where(ul:not(.c-list, .c-row), ol:not(.c-list, .c-row)) {
padding-left: 1.25em;
list-style: revert;
}
.c-gutenberg strong {
font-weight: bolder;
}
.c-gutenberg :where(a:-moz-any-link) {
text-decoration: underline;
color: var(--c-gutenberg-a-color);
}
.c-gutenberg :where(a:any-link) {
text-decoration: underline;
color: var(--c-gutenberg-a-color);
}
.c-gutenberg .wp-element-caption {
margin-top: var(--c-gutenberg-wp-element-caption-margin-top);
margin-bottom: 0;
font-size: var(--c-gutenberg-wp-element-caption-font-size);
line-height: var(--c-gutenberg-wp-element-caption-line-height);
color: var(--c-gutenberg-wp-element-caption-color);
}
.c-gutenberg .wp-block-embed-youtube > .wp-block-embed__wrapper {
position: relative;
display: block;
width: 100%;
padding: 0;
}
.c-gutenberg .wp-block-embed-youtube > .wp-block-embed__wrapper::before {
content: "";
display: block;
aspect-ratio: 16/9;
}
.c-gutenberg .wp-block-embed-youtube > .wp-block-embed__wrapper > iframe {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 100%;
border: none;
}
.c-gutenberg :where(div, hr, dl, ol, ul, p, blockquote, figure, table),
.c-gutenberg .pdfemb-viewer {
margin-bottom: var(--c-gutenberg-elem-gap);
}
.c-gutenberg :where(div, hr, dl, ol, ul, p, blockquote, figure, table):last-child,
.c-gutenberg .pdfemb-viewer:last-child {
margin-bottom: 0;
}
.c-gutenberg :where(h1, h2, h3, h4, h5, h6) :first-child {
margin-top: 0;
}
.c-gutenberg .wp-block-embed__wrapper,
.c-gutenberg .pdfemb-pagescontainer, .c-gutenberg .pdfemb-inner-div {
margin: 0;
}
.c-gutenberg {
font-size: 16px;
line-height: 2;
}
.c-gutenberg :is(h1, h2, h3, h4, h5, h6) {
margin: 1.5em 0 1em;
font-weight: 500;
line-height: 1.6;
}
.c-gutenberg :is(h1, h2, h3, h4, h5, h6):first-child {
margin-top: 0;
}
.c-gutenberg h1 + :is(h2, h3, h4, h5, h6),
.c-gutenberg h2 + :is(h3, h4, h5, h6),
.c-gutenberg h3 + :is(h4, h5, h6),
.c-gutenberg h4 + :is(h5, h6),
.c-gutenberg h5 + h6 {
margin-top: 0;
}
.c-gutenberg h2 {
font-size: 1.8em;
border-bottom: 1px solid var(--color-black);
}
.c-gutenberg h3 {
font-size: 1.5em;
}
.c-gutenberg h4 {
font-size: 1.3em;
}
.c-gutenberg hr {
border-color: var(--color-gray);
}
.c-gutenberg .c-dataList > .item {
margin: 0;
}
.c-gutenberg strong {
font-weight: 600;
}
.c-gutenberg > .section {
margin-block: calc(var(--c-gutenberg-elem-gap) * 2);
}
.c-gutenberg > .section:first-child {
margin-top: 0;
}
.c-gutenberg > .section:last-child {
margin-bottom: 0;
}
.c-gutenberg > .section.-singleInterview-c-card-typeTalk {
margin-inline: calc((var(--content-width-small) - var(--content-width-medium)) / 2);
}
.c-gutenberg>iframe{
margin-bottom: var(--c-gutenberg-elem-gap);
} .privacy{
max-width: var(--content-width-large);
margin-inline: auto;
line-height: 2.2;
}
.privacy_wrap > h2{
position: relative;
font-size: var(--font-28);
font-weight: bold;
border-bottom: 1px solid #CECACA;
margin-bottom: 0.5em;
}
.privacy_wrap > h2::after{
content: "";
position: absolute;
bottom: -1%;
left: 0;
width: 20%;
border-top: 2px solid var(--color-blue);
}
.privacy_wrap{
margin: 2em 0;
}
.privacy_wrap > p{
font-size: var(--font-16);
}
.privacy_wrap>.list{
padding-left: 1em;
margin-left: 1em;
text-indent: -1em;
}
@media (max-width:767px) {
.privacy_wrap>.list{
padding: 0.5em;
}
.privacy_wrap > h2{
line-height: 1.6;
}
}