.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;
}
@media (max-width:767px) {
.main{
width: 100%;
}
} .hero>.home-hero{
position: relative;
}
.hero>.home-hero>.media{
display: flex;
height: 100vh;
max-height: 100%;
width: 100%;
position: sticky;
top: 0;
}
.hero>.home-hero>.media>.img-wrap{
flex-basis: 50%;
max-width: 50%;
object-fit: cover;
opacity: 0;
transition: opacity 0.8s ease-in-out;
position: relative;
}
.hero>.home-hero>.media>.img-wrap::before{
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
}
.hero>.home-hero>.media>.img-wrap>.img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero>.home-hero>.media>.img-wrap.fade-in {
opacity: 1;
}
.hero>.home-hero>.deco{
position: absolute;
top: 21%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.hero>.home-hero>.deco>img { transition: filter 1s ease-in-out, transform 1s ease-in-out;
}
.hero>.home-hero>.deco>img.shadow-on {
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
transform: translateY(-5px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
.hero>.home-hero>.deco img.fade-out {
opacity: 0;
transform: translateY(-10px);
}
.hero>.home-hero>.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
opacity: var(--overlay-opacity, 0);
transition: opacity 0.1s ease-out;
}
.hero>.home-hero>.content>.hero-txt{
padding-block: var(--px-400) var(--px-450);
padding-inline: 3%;
}
.hero>.home-hero>.content>.hero-txt {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.hero>.home-hero>.content>.hero-txt.show-after-logo {
opacity: 1;
transform: translateY(0);
}
.hero>.home-hero>.content>.hero-txt>h2{
color: var(--color-white-b);
font-size: var(--font-60);
font-weight: bold;
text-align: center;
line-height: 1.4;
margin-bottom: var(--px-100);
}
.hero>.home-hero>.content>.hero-txt>.txt>p{
font-size: var(--font-20);
font-weight: 700;
line-height: 2.2;
letter-spacing: 0.15em;
text-align: center;
color: var(--color-white-b);
margin-bottom: 1.5em;
}
.hero>.home-hero>.content>.hero-txt.appear {
opacity: 1;
transform: translateY(0);
}
@media (max-width:960px) {
.hero>.home-hero>.media{
flex-direction: column;
}
.hero>.home-hero>.media>.img-wrap{
flex-basis: 100%;
max-width: 100%;
height: 50%;
}
}
@media (max-width:560px) {
.hero>.home-hero>.deco{
top: 18%;
}
} .hero>.home-hero {
transform-origin: center center;
transition: transform 0.1s ease-out;
will-change: transform;
}
.hero>.home-hero.scale-down {
transform: scale(var(--scale-ratio, 1)) translateY(var(--translate-y, 0px));
}
.hero>.home-hero.scale-down>.deco,
.hero>.home-hero.scale-down>.overlay {
transition: inherit;
}
.hero>.home-hero.scale-down>.content {
transform: scale(calc(1 / var(--scale-ratio, 1)));
transition: transform 0.1s ease-out;
transform-origin: center center;
} .heading-flx{
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: var(--px-20);
}
.heading-flx.-border{
border-bottom: 1px solid var(--color-black);
}
@media (max-width:767px) {
.heading-flx{
flex-direction: column;
gap: 20px;
}
}
.c-heading.-typeA{
width: 100%;
display: flex;
align-items: baseline;
gap: var(--px-40);
margin-bottom: var(--px-48);
}
.c-heading.-typeA > .en-ttl{
font-size: var(--font-120);
font-weight: 400;
font-family: var(--font-din);
letter-spacing: -0.02em;
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;
}
.c-heading.-typeA > .ttl::before{
content: "";
position: absolute;
top: 50%;
left: -1em;
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;
align-items: baseline;
gap: var(--px-32);
}
.c-heading.-typeB > .ttl{
font-size: var(--font-30);
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.08em;
}
.c-heading.-typeB > .sub-ttl{
font-size: var(--font-15);
font-weight: 700;
line-height: 1.4;
position: relative;
}
.c-heading.-typeB > .sub-ttl::before{
content: "/";
position: absolute;
top: 50%;
left: -1.5em;
transform: translateY(-50%);
font-size: 15px;
}
@media (max-width:960px) {
.c-heading.-typeB > .sub-ttl::before{
left: -1em;
}
}
@media (max-width:560px) {
.c-heading.-typeB{
flex-direction: column;
gap: 5px;
}
.c-heading.-typeB > .sub-ttl{
padding-left: 0;
}
.c-heading.-typeB > .sub-ttl::before{
content: none;
}
} .home-service>.inner{
width: var( --content-width-small);
margin-inline: auto;
padding-block: var(--px-130) var(--px-200);
padding-inline: 1% 2%;
}
.home-service>.inner>.item{
position: relative;
z-index: 0;
}
.home-service>.inner>.item+.item{
margin-top: var(--px-40);
}
.home-service>.inner>.item>.link{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
position: relative;
min-height: 440px;
color: inherit;
overflow: hidden;
padding-block: var(--px-32) var(--px-40);
padding-inline: var(--px-32);
z-index: 2;
}
.home-service>.inner>.item:nth-child(2)>.link{
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/home-service-img01.jpg) no-repeat center / cover;
}
.home-service>.inner>.item:nth-child(3)>.link{
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/home-service-img02.jpg) no-repeat center / cover;
}
.home-service>.inner>.item:nth-child(4)>.link{
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/home-service-img03.jpg) no-repeat center / cover;
}
.home-service>.inner>.item:nth-child(5)>.link{
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/home-service-img04.jpg) no-repeat center / cover;
}
.home-service>.inner >.item >.link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.60) 100%), rgba(0, 0, 0, 0.10);
z-index: -1;
}
.home-service>.inner>.item::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 8px;
left: 8px;
background: var(--color-black);
z-index: -1;
}
@media ( hover : hover) {
.home-service>.inner>.item>.link:hover{
transform: translateX(8px) translateY(8px);
}
}
.home-service>.inner >.item >.link>.number{
font-size: var(--font-40);
font-family: var(--font-din);
color: var(--color-white);
}
.home-service>.inner >.item >.link>.number>p{
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.home-service>.inner >.item >.link>.flx{
display: flex;
align-items: flex-end;
gap: clamp(24px, 5.2083333333vw, 100px);
width: 100%;
justify-content: space-between;
position: relative;
z-index: 2;
}
.home-service>.inner>.item>.link>.flx>.content{
flex: 1; }
.home-service>.inner >.item >.link>.flx>.content>.ttl{
font-size: var(--font-38);
font-weight: 700;
color: var(--color-white);
display: inline;
background: var(--color-black);
line-height: 1.4;
letter-spacing: -0.02em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 8px 16px;
}
.home-service>.inner >.item >.link>.flx>.content>.txt{
font-size: var(--font-15);
font-weight: 700;
color: var(--color-black);
line-height: 1.6;
letter-spacing: -0.02em;
margin-top: var(--px-24);
display: inline-block;
background: var(--color-white);
padding: 8px 16px;
}
.home-service>.inner >.item >.link>.flx>.action{
font-size: var(--font-16);
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
display: flex;
gap: var(--px-24);
align-items: center;
padding-block: 0 1.5em;
padding-right: 0.7em;
border-bottom: 1px solid var(--color-white); 
}
@media (max-width:1200px) {
.home-service>.inner >.item >.link>.flx{
flex-direction: column;
align-items: start;
}
}
@media (max-width:960px) {
.home-service>.inner >.item >.link>.flx>.content>.ttl{
line-height: 1.55;
}
}
@media (max-width:767px) {
.home-service>.inner>.item>.link{
min-height: auto;
}
.home-service>.inner >.item >.link>.number{
margin-bottom: 30px;
}
}
@media (max-width:560px) {
.home-service>.inner{
padding-bottom: 50px;
}
} .home-about{
margin-top: var(--px-120);
position: relative;
}
.home-about>.deco-top{
position: absolute;
top: -15%;
left: 5%;
z-index: 1;
}
.home-about>.deco-top>img{
width: clamp(400px, 66.6666666667vw, 1200px);
}
.home-about>.deco-bottom{
position: absolute;
top: clamp(0px, 26.1111111111vw, 470px);
right: 5em;
z-index: 1;
}
.home-about>.deco-bottom>img{
width: clamp(200px, 26.6666666667vw, 480px);
}
@media (max-width:1200px) {
.home-about>.deco-top{
top: -5%;
left: 5%;
}
.home-about>.deco-top>img{
width: clamp(280px, 58.3333333333vw, 700px);
}
.home-about>.deco-bottom{
top: 25%;
right: auto;
left: 40%;
}
.home-about>.deco-bottom>img{
width: clamp(200px, 29.1666666667vw, 350px);
}
}
@media (max-width:960px) {
.home-about>.deco-bottom{
top: 20%;
}
}
@media (max-width:767px) {
.home-about>.inner{
padding-top: 0;
}
.home-about>.deco-top{
left: 0;
}
}
@media (max-width:630px) {
.home-about>.deco-bottom{
top: 15%;
}
}
@media (max-width:560px) {
.home-about>.deco-top>img{
max-width: 100%;
width: 900px;
height: 250px;
object-fit: cover;
}
.home-about>.deco-bottom{
left: 0;
top: 195px;
}
.home-about>.deco-bottom>img{
max-width: 100%;
width: 900px;
height: 250px;
object-fit: cover;
}
}
.home-about>.inner{
width: min(80vw, 1580px);
margin-inline-start: auto;
background-color: var(--color-blue);
position: relative;
padding-block: var(--px-55) var(--px-120);
padding-inline: var(--px-80);
}
.home-about>.inner::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.2;
pointer-events: none;
}
.home-about>.inner>.deco{
position: absolute;
bottom: 5%;
left: -4%;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
font-size: var(--font-20);
color: var(--color-blue);
font-family: var(--font-din);
letter-spacing: 0.04em;
}
.home-about>.inner>.ttl{
text-align: right;
position: relative;
padding-right: clamp(10px, 5.5555555556vw, 100px);
}
.home-about>.inner>.ttl>h2{
z-index: 10;
position: relative;
display: inline-block;
}
.home-about>.inner>.content{
margin-top:clamp(0px, 6.6666666667vw, 120px);
}
.home-about>.inner>.content>p{
font-size: var(--font-16);
color: var(--color-white);
font-weight: 700;
line-height: 2.4;
}
.home-about>.inner>.content>p+p{
margin-block: 1em var(--px-24);
}
@media (max-width:1525px) {
.home-about>.inner>.ttl{
padding-right: 0;
}
}
@media (max-width:767px) {
.home-about>.inner{
width: 95vw;
padding-inline: 3%;
}
.home-about>.inner>.ttl>h2{
width: 110px;
}
.home-about>.inner>.deco{
bottom: 0;
}
}
@media (max-width:560px) {
.home-about>.inner>.content{
margin-top: 80px;
}
.home-about>.inner>.deco{
left: -4.5%;
}
} svg .svg-elem-1{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
svg.active .svg-elem-1{
fill: rgb(255, 255, 255);
}
svg .svg-elem-2{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
svg.active .svg-elem-2{
fill: rgb(255, 255, 255);
}
svg .svg-elem-3{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
svg.active .svg-elem-3{
fill: rgb(255, 255, 255);
}
svg .svg-elem-4{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}
svg.active .svg-elem-4{
fill: rgb(255, 255, 255);
}
svg .svg-elem-5{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}
svg.active .svg-elem-5{
fill: rgb(255, 255, 255);
}
svg .svg-elem-6{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}
svg.active .svg-elem-6{
fill: rgb(255, 255, 255);
}
svg .svg-elem-7{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}
svg.active .svg-elem-7{
fill: rgb(255, 255, 255);
}
svg .svg-elem-8{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}
svg.active .svg-elem-8{
fill: rgb(255, 255, 255);
}
svg .svg-elem-9{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}
svg.active .svg-elem-9{
fill: rgb(255, 255, 255);
}
svg .svg-elem-10{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}
svg.active .svg-elem-10{
fill: rgb(255, 255, 255);
}
svg .svg-elem-11{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}
svg.active .svg-elem-11{
fill: rgb(255, 255, 255);
}
svg .svg-elem-12{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}
svg.active .svg-elem-12{
fill: rgb(255, 255, 255);
}
svg .svg-elem-13{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}
svg.active .svg-elem-13{
fill: rgb(255, 255, 255);
}
svg .svg-elem-14{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}
svg.active .svg-elem-14{
fill: rgb(255, 255, 255);
}
svg .svg-elem-15{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}
svg.active .svg-elem-15{
fill: rgb(255, 255, 255);
}
svg .svg-elem-16{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}
svg.active .svg-elem-16{
fill: rgb(255, 255, 255);
}
svg .svg-elem-17{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}
svg.active .svg-elem-17{
fill: rgb(255, 255, 255);
}
svg .svg-elem-18{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}
svg.active .svg-elem-18{
fill: rgb(255, 255, 255);
}
svg .svg-elem-19{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}
svg.active .svg-elem-19{
fill: rgb(255, 255, 255);
}
svg .svg-elem-20{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}
svg.active .svg-elem-20{
fill: rgb(255, 255, 255);
}
svg .svg-elem-21{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}
svg.active .svg-elem-21{
fill: rgb(255, 255, 255);
}
svg .svg-elem-22{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}
svg.active .svg-elem-22{
fill: rgb(255, 255, 255);
}
svg .svg-elem-23{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}
svg.active .svg-elem-23{
fill: rgb(255, 255, 255);
}
svg .svg-elem-24{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
}
svg.active .svg-elem-24{
fill: rgb(255, 255, 255);
}
svg .svg-elem-25{
fill: transparent;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
-webkit-transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
transition: fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}
svg.active .svg-elem-25{
fill: rgb(255, 255, 255);
} .home-works>.inner{
width: var(--content-width-medium);
margin-inline: auto;
padding-block: var(--px-55) var(--px-100);
}
.home-works>.inner>.deco{
margin-bottom: 38px;
transform: translateX(4%);
margin-right: 1em;
position: relative;
}
.home-works>.inner>.deco::after{
content: "";
position: absolute;
bottom: -70%;
right: 4.9%;
width: 1.5em;
height: 3.2em;
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/works-line.svg) no-repeat center / cover; 
}
.home-works>.inner>.deco>.txt{
font-size: var(--font-19);
line-height: 1.8;
font-weight: 700;
text-align: right;
color: var(--color-blue);
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-skip-ink: auto;
text-decoration-thickness: 10%;
text-underline-offset: 30%;
text-underline-position: from-font;
}
.home-works>.inner>.body{
margin-top: var(--px-48);
}
@media (max-width:960px) {
.home-works>.inner>.deco{
margin-right: 2em;
}
.home-works>.inner>.deco::after{
bottom: -85%;
}
}
@media (max-width:560px) {
.home-works>.inner{
padding-bottom: 30px;
}
} .home-topics{
background-color: var(--color-white-b);
}
.home-topics>.inner{
width: var(--content-width-medium);
margin-inline: auto;
margin-top: var(--px-100);
padding-block: var(--px-130) var(--px-160);
position: relative;
z-index: 0;
}
.home-topics>.inner::before{
content: "";
position: absolute;
top: 0;
left: -7%;
background: url(//ibuki-kogyo.co.jp/wp-content/themes/ibuki/assets/img/topics.svg) no-repeat center;
z-index: -1;
width: 560px;
height: 168px;
}
.home-topics>.inner>.body + .heading-flx{
margin-top: var(--px-100);
}
@media (max-width:960px) {
.home-topics>.inner::before{
width: 370px;
height: 100px;
background-size: 300px;
}
}
@media (max-width:560px) {
.home-topics>.inner{
margin-top: 50px;
padding-bottom: 80px;
}
.home-topics>.inner::before{
width: 300px;
background-size: 250px;
}
} .home-content>.inner>.gird{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.home-content>.inner>.gird>.list + .list{
border-left: 1px solid var(--color-gray);
}
.home-content>.inner>.gird>.list>.link{
display: flex;
flex-direction: column;
align-items: center;
padding-inline: 1em;
padding-block: var(--px-135) var(--px-240);
position: relative;
overflow: hidden;
}
.home-content>.inner>.gird>.list>.link>*{
position: relative;
z-index: 2;
}
.home-content>.inner>.gird>.list>.link::before{
content: '';
position: absolute;
width: 100px;
height: 100px;
background: var(--color-gray-b);
border-radius: 50%;
top: calc(8% + 25px);
left: 50%;
transform: translate(-50%, 50%) scale(0);
transition: transform 0.7s ease-out;
}
@media ( hover: hover) {
.home-content>.inner>.gird>.list>.link{
opacity: 1;
}
.home-content>.inner>.gird>.list>.link:hover:before{
transform: translate(-50%, 50%) scale(15);
}
}
.home-content>.inner>.gird>.list>.link>.img{
position: relative;
background-color: var(--color-gray-b);
width: 96px;
height: 96px;
aspect-ratio: 1/1;
border-radius: 999px;
margin-inline: auto;
}
.home-content>.inner>.gird>.list>.link>.img>img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 34px;
height: 34px;
transition: transform 0.3s ease;
}
@media (hover : hover) {
.home-content>.inner>.gird>.list>.link:hover>.img>img{
animation: shake 1s ease-in-out 1;
}
}
@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-50%, -50%) rotate(-10deg); }
50% { transform: translate(-50%, -50%) rotate(10deg); }
75% { transform: translate(-50%, -50%) rotate(-10deg); }
}
.home-content>.inner>.gird>.list>.link>.content{
margin-block: var(--px-32) var(--px-24);
}
.home-content>.inner>.gird>.list>.link>.content>.ttl{
text-align: center;
font-size: var(--font-28);
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.02em;
}
.home-content>.inner>.gird>.list>.link>.content>.txt{
margin-top: 8px;
text-align: center;
font-size: var(--font-15);
font-weight: 700;
line-height: 1.8;
color: var(--color-black-b);
}
.home-content>.inner>.gird>.list>.link>.c-btn>.action{
font-size: var(--font-15);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
display: flex;
gap: var(--px-24);
align-items: center;
padding-block: 1.5em;
padding-right: 0.7em;
width: fit-content;
}
@media (max-width:1200px) {
.home-content>.inner>.gird>.list>.link{
padding-block: var(--px-80);
}
}
@media (max-width:960px) {
.home-content>.inner>.gird>.list>.link>.img{
width: 50px;
height: 50px;
}
.home-content>.inner>.gird>.list>.link>.img>img{
width: 24px;
height: 24px;
}
}
@media (max-width:767px) {
.home-content>.inner>.gird{
grid-template-columns: 1fr;
}
.home-content>.inner>.gird>.list + .list{
border-left: none;
border-top: 1px solid var(--color-gray);
}
.home-content>.inner>.gird>.list>.link{
padding-block: 30px;
}
.home-content>.inner>.gird>.list>.link>.content{
margin-block: .5em;
}
}