@charset "utf-8";
/* CSS Document */



@keyframes scrollLine {
	0% { top: -10px; }
	100% { top: 100%; }
}

/*PC*/
@media screen and (min-width: 1680px) {

.kv { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 860px; z-index: 10; overflow: hidden;}
.kv::before { content: ""; position: absolute; top: 0; left: 0; z-index: 20; width: 50%; height: 100%; background-image: linear-gradient(90deg, #ffffff 50%, transparent);}
.kv::after { content: ""; width: 1000px; aspect-ratio: 100 / 15; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; position: absolute; bottom: 0; right: 0; z-index: 30; background: var(--color01_08);}
.kv .slick-list,
.kv .slick-track,
.kv .slick-slide { height: 100%; }
.kv .slider-kv { width: 100%; height: 100%;}
.kv .slider-kv li { width: 100%; height: 100%;}
.kv .slider-kv li img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center;}
.kv .txt { position: absolute; top: 300px; left: 0; width: 100%; z-index: 20;}
.kv .txt .inner { max-width: 1536px; margin: auto;}
.kv .txt .inner h2 { font-size: 60px; letter-spacing: 0.2em; line-height: 90px; margin-bottom: 40px;}
.kv .txt .inner h2 span { color: var(--color01_10);}
.kv .txt .inner p { line-height: 40px;}
.kv .scloll { position: absolute; left: 10; bottom: 100px; z-index: 50;}

.kv .scroll { position: absolute; left: 30px; bottom: 80px; z-index: 20; display: flex; flex-direction: column; align-items: center;}
.kv .scroll__text { writing-mode: vertical-rl; letter-spacing: 0.2em;}
.kv .scroll__line { position: relative; display: block; width: var(--com_px01); height: 80px; margin-top: 15px; background: #000; overflow: hidden;}
.kv .scroll__line::after { content: ""; position: absolute; top: -10px; left: 0; width: var(--com_px01); height: 10px; background: #fff; animation: scrollLine 2s ease-in-out infinite;}

.kv .slider-kv { transition: filter 0.8s ease; }
.kv .slider-kv.is-highlight { filter: brightness(1.8); }


/*----------------------------*/

main { margin-top: 100vh;}

/*----------------------------*/

/*.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") 0 0 no-repeat; background-size: cover; overflow: hidden;}*/
.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") center center no-repeat; background-size: cover; overflow: hidden; position: relative; margin: 0 0 70px;}
.cont01::before { content: "STRONG"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 320px; left: -400px; transform: rotate(90deg)}
.cont01 .inner { max-width: 1536px; margin: auto; height: 980px; display: flex; justify-content: center; align-items: center;}
.cont01 .inner .txt { display: inline-block; background: var(--color00_08); padding: 30px 80px; margin: 0 auto; width: 850px;}
.cont01 .inner .txt h2 { font-size: 50px; margin-bottom: 50px;}
.cont01 .inner .txt h2::before { content: attr(data-en); font-size: 18px; color: var(--color01_10); display: block;}
.cont01 .inner .txt p {}
.cont01 .inner .txt .btn { width: 248px; height: 72px; margin: 50px 0 0;}
.cont01 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont01 .inner .txt .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont01 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont01 .inner .txt .btn a:hover::after  { content: "\f061"; right: 20px;}


/*----------------------------*/

.cont02 { background: var(--color01_10); overflow: hidden;}
.cont02 .inner { position: relative;}
.cont02 .inner::before { content: "SERVICE"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: -110px; right: 20px;}
.cont02 .inner .txt01 { max-width: 1536px; margin: auto; padding: 90px 0 110px; position: relative;}
.cont02 .inner .txt01 h2 { font-size: 50px; margin-bottom: 50px;}
.cont02 .inner .txt01 h2::before { content: attr(data-en); font-size: 18px; color: var(--color00_10); display: block;}
.cont02 .inner .txt01 p { padding-right: 300px;}
.cont02 .inner .txt01 .btn { width: 248px; height: 72px; position: absolute; right: -20px; bottom: 110px;}
.cont02 .inner .txt01 .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont02 .inner .txt01 .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont02 .inner .txt01 .btn a:hover { background: var(--color99_08);}
.cont02 .inner .txt01 .btn a:hover::after  { content: "\f061"; right: 20px;}

.cont02 .inner .box01 ul { width: 100%; display: flex; background: var(--color00_10);}
.cont02 .inner .box01 ul li { width: calc( 100% / 3); position: relative; height: 800px; overflow: hidden;}
.cont02 .inner .box01 ul li::before { content: ""; width: 0; height: 0; border-top: 80px solid var(--color01_10); border-left: 80px solid transparent; position: absolute; top: 0; right: 0; z-index: 10;}
.cont02 .inner .box01 ul li a { display: block;}
.cont02 .inner .box01 ul li a .img	{ width: 100%; height: 100%;}
.cont02 .inner .box01 ul li a .img	img { width: 100%; height: 100%; object-fit: cover; }
.cont02 .inner .box01 ul li a .txt { width: 100%; background: var(--color01_08); padding: 80px 90px 90px 50px; box-shadow: 0px 0px 15px 0px var(--color99_09); position: absolute; bottom: -40px; right: -40px; transition: ease .5s; flex-grow: 1;}
.cont02 .inner .box01 ul li a .txt::after { content: "詳しくはこちら \f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; position: absolute; bottom: 14px; right: 30px;}
.cont02 .inner .box01 ul li a:hover .txt { transform: translate( -40px,-40px); transition: ease .5s;}
.cont02 .inner .box01 ul li a .txt h3 { font-size: 28px;}
.cont02 .inner .box01 ul li a .txt h3::before { content: attr(data-en); font-size: 16px; color: var(--color99_10); white-space: nowrap; display: block; line-height: normal; text-transform: uppercase;}
.cont02 .inner .box01 ul li a .txt p { margin-top: 20px;}
.cont02 .inner .box01 ul li a .txt p {}

.cont02 .inner .box02 { padding: 300px 0 300px; background: url("../images/index/cont02_box02Bg.jpg") no-repeat; background-size: cover; position: relative;}
.cont02 .inner .box02::before { content: ""; width: 100%; height: 200px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}
.cont02 .inner .box02::after  { content: ""; width: 100%; height: 200px; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; bottom: 0; left: 0;}
.cont02 .inner .box02 .txt02 { text-align: center; margin-bottom: 100px;}
.cont02 .inner .box02 .txt02 h3 { font-size: 48px; color: var(--color00_10); margin-bottom: 50px; text-shadow: 2px 2px 1px var(--color99_09);}
.cont02 .inner .box02 .txt02 p { color: var(--color00_10); text-shadow: 2px 2px 1px var(--color99_09);}
.cont02 .inner .box02 ul { display: flex;justify-content: center; gap: 30px;}
.cont02 .inner .box02 ul li { width: 400px; box-shadow: 10px 10px 15px 0px var(--color99_09);}
.cont02 .inner .box02 ul li a {}

/*----------------------------*/

.bgSky { margin: 0 0 70px; background: var(--color00_10) url("../images/index/skyBg.jpg") bottom left no-repeat; background-size: cover; position: relative;}
.bgSky::before { content: ""; width: 100%; height: 200px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}

.cont03 { background: var(--color01_10); width: calc( 100% - 72px); padding: 100px 0 110px; border-radius: 0 80px 80px 0; position: relative;}
.cont03::before { content: "WORKS"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 390px; left: -350px; transform: rotate(90deg)}
.cont03 .inner { width: auto; margin: auto;}
.cont03 .inner .box { width: 50%; margin: 0 0 100px auto;}
.cont03 .inner .box h2 { font-size: 50px; margin-bottom: 50px;}
.cont03 .inner .box h2::before { content: attr(data-en); font-size: 18px; color: var(--color00_10); display: block;}
.cont03 .inner .box p {}

.cont03 .inner .works-slider-wrap { position: relative; width: 90%; margin: 0 auto 100px;}
.cont03 .inner .slider-works { margin: 0; padding: 0;}
.cont03 .inner .slider-works li { padding: 0 30px; box-sizing: border-box;}
.cont03 .inner .slider-works .img { width: 100%; aspect-ratio: 1 / 1; }
.cont03 .inner .slider-works .img img { width: 100%; height: 100%; object-fit: cover; }

.cont03 .inner .works-prev,
.cont03 .inner .works-next { position: absolute; top: 37%; transform: translateY(-50%); width: 50px; height: 50px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 50px; line-height: 0; cursor: pointer; z-index: 10;}
.cont03 .inner .works-prev {left: 0px;}
.cont03 .inner .works-next {right: 0px;}
.cont03 .inner .works-prev:hover,
.cont03 .inner .works-next:hover {background: rgba(0,0,0,.8);}

.cont03 .inner .btn { width: 248px; height: 72px; margin: auto;}
.cont03 .inner .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont03 .inner .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont03 .inner .btn a:hover { background: var(--color99_08);}
.cont03 .inner .btn a:hover::after  { content: "\f061"; right: 20px;}



/*----------------------------*/

.cont04 {}
.cont04 .inner { max-width: 1536px; height: 870px; margin: auto; position: relative;}
.cont04 .inner .txt { display: inline-block; background: var(--color99_08); color: var(--color00_10); padding: 30px 80px; position: absolute; bottom: 72px; left: 0;}
.cont04 .inner .txt h2 { font-size: 50px; margin-bottom: 50px;}
.cont04 .inner .txt h2::before { content: attr(data-en); font-size: 18px; color: var(--color01_10); display: block;}
.cont04 .inner .txt p {}
.cont04 .inner .txt .btn { width: 248px; height: 72px; margin: 50px 0 0 0;}
.cont04 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont04 .inner .txt .btn a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont04 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont04 .inner .txt .btn a:hover::after { content: "\f061"; right: 20px;}



}


@media print, screen and (min-width: 768px) and ( max-width: 1679px) {

.kv { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 51.1905vw; z-index: 10; overflow: hidden;}
.kv::before { content: ""; position: absolute; top: 0; left: 0; z-index: 20; width: 50%; height: 100%; background-image: linear-gradient(90deg, #ffffff 50%, transparent);}
.kv::after { content: ""; width: 59.5238vw; aspect-ratio: 100 / 15; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; position: absolute; bottom: 0; right: 0; z-index: 30; background: var(--color01_08);}
.kv .slick-list,
.kv .slick-track,
.kv .slick-slide { height: 100%; }
.kv .slider-kv { width: 100%; height: 100%;}
.kv .slider-kv li { width: 100%; height: 100%;}
.kv .slider-kv li img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center;}
.kv .txt { position: absolute; top: 17.8571vw; left: 0; width: 100%; z-index: 20;}
.kv .txt .inner { max-width: 91.4286vw; margin: auto;}
.kv .txt .inner h2 { font-size: 3.5714vw; letter-spacing: 0.2em; line-height: 5.3571vw; margin-bottom: 2.3810vw;}
.kv .txt .inner h2 span { color: var(--color01_10);}
.kv .txt .inner p { line-height: 2.3810vw;}
.kv .scloll { position: absolute; left: 10; bottom: 5.9524vw; z-index: 50;}

.kv .scroll { position: absolute; left: 1.7857vw; bottom: 4.7619vw; z-index: 20; display: flex; flex-direction: column; align-items: center;}
.kv .scroll__text { writing-mode: vertical-rl; letter-spacing: 0.2em;}
.kv .scroll__line { position: relative; display: block; width: var(--com_px01); height: 4.7619vw; margin-top: 0.8929vw; background: #000; overflow: hidden;}
.kv .scroll__line::after { content: ""; position: absolute; top: -0.5952vw; left: 0; width: var(--com_px01); height: 0.5952vw; background: #fff; animation: scrollLine 2s ease-in-out infinite;}

.kv .slider-kv { transition: filter 0.8s ease; }
.kv .slider-kv.is-highlight { filter: brightness(1.8); }


/*----------------------------*/

main { margin-top: 100vh;}

/*----------------------------*/

/*.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") 0 0 no-repeat; background-size: cover; overflow: hidden;}*/
.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") 0 0 no-repeat; background-size: cover; overflow: hidden; position: relative; margin: 0 0 4.1667vw;}
.cont01::before { content: "STRONG"; font-size: 13.6905vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 19.0476vw; left: -23.8095vw; transform: rotate(90deg)}
.cont01 .inner { max-width: 91.4286vw; margin: auto; height: 58.3333vw; display: flex; justify-content: center; align-items: center;}
.cont01 .inner .txt { display: inline-block; background: var(--color00_08); padding: 1.7857vw 4.7619vw; margin: 0 auto; width: 50.5952vw;}
.cont01 .inner .txt h2 { font-size: 2.9762vw; margin-bottom: 2.9762vw;}
.cont01 .inner .txt h2::before { content: attr(data-en); font-size: 1.0714vw; color: var(--color01_10); display: block;}
.cont01 .inner .txt p {}
.cont01 .inner .txt .btn { width: 14.7619vw; height: 4.2857vw; margin: 2.9762vw 0 0;}
.cont01 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 2.9762vw; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont01 .inner .txt .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.5476vw; position: absolute; right: 1.7857vw;}
.cont01 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont01 .inner .txt .btn a:hover::after  { content: "\f061"; right: 1.1905vw;}


/*----------------------------*/

.cont02 { background: var(--color01_10); overflow: hidden;}
.cont02 .inner { position: relative;}
.cont02 .inner::before { content: "SERVICE"; font-size: 13.6905vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: -6.5476vw; right: 1.1905vw;}
.cont02 .inner .txt01 { max-width: 91.4286vw; margin: auto; padding: 5.3571vw 0 6.5476vw; position: relative;}
.cont02 .inner .txt01 h2 { font-size: 2.9762vw; margin-bottom: 2.9762vw;}
.cont02 .inner .txt01 h2::before { content: attr(data-en); font-size: 1.0714vw; color: var(--color00_10); display: block;}
.cont02 .inner .txt01 p { padding-right: 17.8571vw;}
.cont02 .inner .txt01 .btn { width: 14.7619vw; height: 4.2857vw; position: absolute; right: -1.1905vw; bottom: 6.5476vw;}
.cont02 .inner .txt01 .btn a { width: 100%; height: 100%; padding-left: 2.9762vw; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont02 .inner .txt01 .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.5476vw; position: absolute; right: 1.7857vw;}
.cont02 .inner .txt01 .btn a:hover { background: var(--color99_08);}
.cont02 .inner .txt01 .btn a:hover::after  { content: "\f061"; right: 1.1905vw;}

.cont02 .inner .box01 ul { width: 100%; display: flex; background: var(--color00_10);}
.cont02 .inner .box01 ul li { width: calc( 100% / 3); position: relative; height: 47.6190vw; overflow: hidden;}
.cont02 .inner .box01 ul li::before { content: ""; width: 0; height: 0; border-top: 4.7619vw solid var(--color01_10); border-left: 4.7619vw solid transparent; position: absolute; top: 0; right: 0; z-index: 10;}
.cont02 .inner .box01 ul li a { display: block;}
.cont02 .inner .box01 ul li a .img	{ width: 100%; height: 100%;}
.cont02 .inner .box01 ul li a .img	img { width: 100%; height: 100%; object-fit: cover; }
.cont02 .inner .box01 ul li a .txt { width: 100%; background: var(--color01_08); padding: 4.7619vw 5.3571vw 5.3571vw 2.9762vw; box-shadow: 0.0000vw 0.0000vw 0.8929vw 0.0000vw var(--color99_09); position: absolute; bottom: -2.3810vw; right: -2.3810vw; transition: ease .5s; flex-grow: 1;}
.cont02 .inner .box01 ul li a .txt::after { content: "詳しくはこちら \f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.1905vw; position: absolute; bottom: 0.8333vw; right: 1.7857vw;}
.cont02 .inner .box01 ul li a:hover .txt { transform: translate( -2.3810vw,-2.3810vw); transition: ease .5s;}
.cont02 .inner .box01 ul li a .txt h3 { font-size: 1.6667vw;}
.cont02 .inner .box01 ul li a .txt h3::before { content: attr(data-en); font-size: 0.9524vw; color: var(--color99_10); white-space: nowrap; display: block; line-height: normal; text-transform: uppercase;}
.cont02 .inner .box01 ul li a .txt p { margin-top: 1.1905vw;}
.cont02 .inner .box01 ul li a .txt p {}

.cont02 .inner .box02 { padding: 17.8571vw 0 17.8571vw; background: url("../images/index/cont02_box02Bg.jpg") no-repeat; background-size: cover; position: relative;}
.cont02 .inner .box02::before { content: ""; width: 100%; height: 11.9048vw; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}
.cont02 .inner .box02::after  { content: ""; width: 100%; height: 11.9048vw; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; bottom: 0; left: 0;}
.cont02 .inner .box02 .txt02 { text-align: center; margin-bottom: 5.9524vw;}
.cont02 .inner .box02 .txt02 h3 { font-size: 2.8571vw; color: var(--color00_10); margin-bottom: 2.9762vw; text-shadow: 0.1190vw 0.1190vw 0.0595vw var(--color99_09);}
.cont02 .inner .box02 .txt02 p { color: var(--color00_10); text-shadow: 0.1190vw 0.1190vw 0.0595vw var(--color99_09);}
.cont02 .inner .box02 ul { display: flex;justify-content: center; gap: 1.7857vw;}
.cont02 .inner .box02 ul li { width: 23.8095vw; box-shadow: 0.5952vw 0.5952vw 0.8929vw 0.0000vw var(--color99_09);}
.cont02 .inner .box02 ul li a {}

/*----------------------------*/

.bgSky { margin: 0 0 4.1667vw; background: var(--color00_10) url("../images/index/skyBg.jpg") bottom left no-repeat; background-size: cover; position: relative;}
.bgSky::before { content: ""; width: 100%; height: 11.9048vw; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}

.cont03 { background: var(--color01_10); width: calc( 100% - 4.2857vw); padding: 5.9524vw 0 6.5476vw; border-radius: 0 4.7619vw 4.7619vw 0; position: relative;}
.cont03::before { content: "WORKS"; font-size: 13.6905vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 23.2143vw; left: -20.8333vw; transform: rotate(90deg)}
.cont03 .inner { width: auto; margin: auto;}
.cont03 .inner .box { width: 50%; margin: 0 0 5.9524vw auto;}
.cont03 .inner .box h2 { font-size: 2.9762vw; margin-bottom: 2.9762vw;}
.cont03 .inner .box h2::before { content: attr(data-en); font-size: 1.0714vw; color: var(--color00_10); display: block;}
.cont03 .inner .box p {}

.cont03 .inner .works-slider-wrap { position: relative; width: 90%; margin: 0 auto 5.9524vw;}
.cont03 .inner .slider-works { margin: 0; padding: 0;}
.cont03 .inner .slider-works li { padding: 0 1.7857vw; box-sizing: border-box;}
.cont03 .inner .slider-works .img { width: 100%; aspect-ratio: 1 / 1; }
.cont03 .inner .slider-works .img img { width: 100%; height: 100%; object-fit: cover; }

.cont03 .inner .works-prev,
.cont03 .inner .works-next { position: absolute; top: 37%; transform: translateY(-50%); width: 2.9762vw; height: 2.9762vw; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 2.9762vw; line-height: 0; cursor: pointer; z-index: 10;}
.cont03 .inner .works-prev {left: 0.0000vw;}
.cont03 .inner .works-next {right: 0.0000vw;}
.cont03 .inner .works-prev:hover,
.cont03 .inner .works-next:hover {background: rgba(0,0,0,.8);}

.cont03 .inner .btn { width: 14.7619vw; height: 4.2857vw; margin: auto;}
.cont03 .inner .btn a { width: 100%; height: 100%; padding-left: 2.9762vw; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont03 .inner .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.5476vw; position: absolute; right: 1.7857vw;}
.cont03 .inner .btn a:hover { background: var(--color99_08);}
.cont03 .inner .btn a:hover::after  { content: "\f061"; right: 1.1905vw;}



/*----------------------------*/

.cont04 {}
.cont04 .inner { max-width: 91.4286vw; height: 51.7857vw; margin: auto; position: relative;}
.cont04 .inner .txt { display: inline-block; background: var(--color99_08); color: var(--color00_10); padding: 1.7857vw 4.7619vw; position: absolute; bottom: 4.2857vw; left: 0;}
.cont04 .inner .txt h2 { font-size: 2.9762vw; margin-bottom: 2.9762vw;}
.cont04 .inner .txt h2::before { content: attr(data-en); font-size: 1.0714vw; color: var(--color01_10); display: block;}
.cont04 .inner .txt p {}
.cont04 .inner .txt .btn { width: 14.7619vw; height: 4.2857vw; margin: 2.9762vw 0 0 0;}
.cont04 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 2.9762vw; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont04 .inner .txt .btn a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.5476vw; position: absolute; right: 1.7857vw;}
.cont04 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont04 .inner .txt .btn a:hover::after { content: "\f061"; right: 1.1905vw;}



}



/*sp*/
@media only screen and (max-width: 767px) {

.kv { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 800px; z-index: 10; overflow: hidden;}
.kv::before { content: ""; position: absolute; top: 0; left: 0; z-index: 20; width: 50%; height: 100%; background-image: linear-gradient(90deg, #ffffff 50%, transparent);}
.kv::after { content: ""; width: 156.2500vw; aspect-ratio: 100 / 15; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; position: absolute; bottom: 0; right: 0; z-index: 30; background: var(--color01_08);}
.kv .slick-list,
.kv .slick-track,
.kv .slick-slide { height: 100%; }
.kv .slider-kv { width: 100%; height: 100%;}
.kv .slider-kv li { width: 100%; height: 100%;}
.kv .slider-kv li img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center;}
.kv .txt { position: absolute; top: 31.2500vw; left: 4.6875vw; width: 100%; z-index: 20;}
.kv .txt .inner { max-width: 240.0000vw; margin: auto;}
.kv .txt .inner h2 { font-size: 7.8125vw; letter-spacing: 0.2em; line-height: 10.9375vw; margin-bottom: 6.2500vw;}
.kv .txt .inner h2 span { color: var(--color01_10);}
.kv .txt .inner p { line-height: 5.6250vw;  color: var(--color99_10); text-shadow: 0 0 0.7813vw var(--color00_10), 0 0 1.5625vw var(--color00_10), 0 0 3.1250vw var(--color00_10), 0 0 6.2500vw var(--color00_10);}
.kv .scloll { position: absolute; left: 10; bottom: 15.6250vw; z-index: 50;}

.kv .scroll { position: absolute; right: 4.6875vw; bottom: 12.5000vw; z-index: 100; display: flex; flex-direction: column; align-items: center;}
.kv .scroll__text { writing-mode: vertical-rl; letter-spacing: 0.2em; color: var(--color00_10);}
.kv .scroll__line { position: relative; display: block; width: var(--com_px01); height: 12.5000vw; margin-top: 2.3438vw; background: var(--color00_10); overflow: hidden;}
.kv .scroll__line::after { content: ""; position: absolute; top: -1.5625vw; left: 0; width: var(--com_px01); height: 1.5625vw; background: var(--color99_10); animation: scrollLine 2s ease-in-out infinite;}

.kv .slider-kv { transition: filter 0.8s ease; }
.kv .slider-kv.is-highlight { filter: brightness(1.8); }


/*----------------------------*/

main { margin-top: 100vh;}

/*----------------------------*/

/*.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") 0 0 no-repeat; background-size: cover; overflow: hidden;}*/
.cont01 { background: var(--color00_10) url("../images/index/cont01Bg_sp.jpg") center center no-repeat; background-size: cover; overflow: hidden; position: relative; margin: 0 0 10.9375vw;}
.cont01::before { content: "STRONG"; font-size: 35.9375vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 50.0000vw; left: -62.5000vw; transform: rotate(90deg)}
.cont01 .inner { max-width: 240.0000vw; margin: auto; height: 153.1250vw; display: flex; justify-content: center; align-items: center; padding: 0 15.6250vw;}
.cont01 .inner .txt { display: inline-block; background: var(--color00_08); padding: 4.6875vw 7.8125vw; margin: 0 auto; max-width: 132.8125vw; position: relative;}
.cont01 .inner .txt h2 { font-size: 6.2500vw; margin-bottom: 7.8125vw;}
.cont01 .inner .txt h2::before { content: attr(data-en); font-size: 2.8125vw; color: var(--color01_10); display: block;}
.cont01 .inner .txt p {}
.cont01 .inner .txt .btn { width: 38.7500vw; height: 11.2500vw; margin: 7.8125vw 0 0;}
.cont01 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 7.8125vw; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont01 .inner .txt .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 4.0625vw; position: absolute; right: 4.6875vw;}
.cont01 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont01 .inner .txt .btn a:hover::after  { content: "\f061"; right: 3.1250vw;}


/*----------------------------*/

.cont02 { background: var(--color01_10); overflow: hidden;}
.cont02 .inner { position: relative;}
.cont02 .inner::before { content: "SERVICE"; font-size: 35.9375vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: -17.1875vw; right: 3.1250vw;}
.cont02 .inner .txt01 { max-width: 240.0000vw; margin: auto; padding: 14.0625vw 4.6875vw 17.1875vw; position: relative;}
.cont02 .inner .txt01 h2 { font-size: 6.2500vw; margin-bottom: 7.8125vw;}
.cont02 .inner .txt01 h2::before { content: attr(data-en); font-size: 2.8125vw; color: var(--color00_10); display: block;}
.cont02 .inner .txt01 p { padding-bottom: 4.6875vw;}
.cont02 .inner .txt01 .btn { width: 38.7500vw; height: 11.2500vw; position: static;}
.cont02 .inner .txt01 .btn a { width: 100%; height: 100%; padding-left: 7.8125vw; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont02 .inner .txt01 .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 4.0625vw; position: absolute; right: 4.6875vw;}
.cont02 .inner .txt01 .btn a:hover { background: var(--color99_08);}
.cont02 .inner .txt01 .btn a:hover::after  { content: "\f061"; right: 3.1250vw;}

.cont02 .inner .box01 ul { width: 100%; display: flex; background: var(--color00_10); flex-direction: column;}
.cont02 .inner .box01 ul li { width: 100%; position: relative; height: 125.0000vw; overflow: hidden; margin-bottom: 4.6875vw;}
.cont02 .inner .box01 ul li::before { content: ""; width: 0; height: 0; border-top: 12.5000vw solid var(--color01_10); border-left: 12.5000vw solid transparent; position: absolute; top: 0; right: 0; z-index: 10;}
.cont02 .inner .box01 ul li a { display: block;}
.cont02 .inner .box01 ul li a .img	{ width: 100%; height: 100%;}
.cont02 .inner .box01 ul li a .img	img { width: 100%; height: 100%; object-fit: cover; }
.cont02 .inner .box01 ul li a .txt { width: 100%; background: var(--color01_08); padding: 12.5000vw 14.0625vw 14.0625vw 7.8125vw; box-shadow: 0.0000vw 0.0000vw 2.3438vw 0.0000vw var(--color99_09); position: absolute; bottom: -6.2500vw; right: -6.2500vw; transition: ease .5s; flex-grow: 1;}
.cont02 .inner .box01 ul li a .txt::after { content: "詳しくはこちら \f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 3.1250vw; position: absolute; bottom: 2.1875vw; right: 4.6875vw;}
.cont02 .inner .box01 ul li a:hover .txt { transform: translate( -6.2500vw,-6.2500vw); transition: ease .5s;}
.cont02 .inner .box01 ul li a .txt h3 { font-size: 4.3750vw;}
.cont02 .inner .box01 ul li a .txt h3::before { content: attr(data-en); font-size: 2.5000vw; color: var(--color99_10); white-space: nowrap; display: block; line-height: normal; text-transform: uppercase;}
.cont02 .inner .box01 ul li a .txt p { margin-top: 3.1250vw;}
.cont02 .inner .box01 ul li a .txt p {}

.cont02 .inner .box02 { padding: 46.8750vw 4.6875vw 46.8750vw; background: url("../images/index/cont02_box02Bg.jpg") no-repeat; background-size: cover; position: relative;}
.cont02 .inner .box02::before { content: ""; width: 100%; height: 31.2500vw; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}
.cont02 .inner .box02::after  { content: ""; width: 100%; height: 31.2500vw; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; bottom: 0; left: 0;}
.cont02 .inner .box02 .txt02 { text-align: center; margin-bottom: 15.6250vw;}
.cont02 .inner .box02 .txt02 h3 { font-size: 7.5000vw; color: var(--color00_10); margin-bottom: 7.8125vw; text-shadow: 0.3125vw 0.3125vw 0.1563vw var(--color99_09);}
.cont02 .inner .box02 .txt02 p { color: var(--color00_10); text-shadow: 0.3125vw 0.3125vw 0.1563vw var(--color99_09); text-align: left;}
.cont02 .inner .box02 ul { display: flex; justify-content: center; gap: 4.6875vw; flex-direction: column; align-items: center;}
.cont02 .inner .box02 ul li { width: 46.8750vw; box-shadow: 1.5625vw 1.5625vw 2.3438vw 0.0000vw var(--color99_09);}
.cont02 .inner .box02 ul li a {}

/*----------------------------*/

.bgSky { margin: 0 0 10.9375vw; background: var(--color00_10) url("../images/index/skyBg.jpg") bottom left no-repeat; background-size: cover; position: relative;}
.bgSky::before { content: ""; width: 100%; height: 31.2500vw; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}

.cont03 { background: var(--color01_10); width: calc( 100% - 11.2500vw); padding: 15.6250vw 0 17.1875vw; border-radius: 0 12.5000vw 12.5000vw 0; position: relative;}
.cont03::before { content: "WORKS"; font-size: 35.9375vw; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 60.9375vw; left: -54.6875vw; transform: rotate(90deg)}
.cont03 .inner { width: auto; margin: auto;}
.cont03 .inner .box { width: 50%; margin: 0 0 15.6250vw auto;}
.cont03 .inner .box h2 { font-size: 6.2500vw; margin-bottom: 7.8125vw;}
.cont03 .inner .box h2::before { content: attr(data-en); font-size: 2.8125vw; color: var(--color00_10); display: block;}
.cont03 .inner .box p {}

.cont03 .inner .works-slider-wrap { position: relative; width: 90%; margin: 0 auto 15.6250vw;}
.cont03 .inner .slider-works { margin: 0; padding: 0;}
.cont03 .inner .slider-works li { padding: 0 4.6875vw; box-sizing: border-box;}
.cont03 .inner .slider-works .img { width: 100%; aspect-ratio: 1 / 1; }
.cont03 .inner .slider-works .img img { width: 100%; height: 100%; object-fit: cover; }

.cont03 .inner .works-prev,
.cont03 .inner .works-next { position: absolute; top: 37%; transform: translateY(-50%); /*width: 7.8125vw; height: 7.8125vw;*/ border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 6.2500vw; line-height: 0; cursor: pointer; z-index: 10;}
.cont03 .inner .works-prev {left: 0.0000vw;}
.cont03 .inner .works-next {right: 0.0000vw;}
.cont03 .inner .works-prev:hover,
.cont03 .inner .works-next:hover {background: rgba(0,0,0,.8);}

.cont03 .inner .btn { width: 38.7500vw; height: 11.2500vw; margin: auto;}
.cont03 .inner .btn a { width: 100%; height: 100%; padding-left: 7.8125vw; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont03 .inner .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 4.0625vw; position: absolute; right: 4.6875vw;}
.cont03 .inner .btn a:hover { background: var(--color99_08);}
.cont03 .inner .btn a:hover::after  { content: "\f061"; right: 3.1250vw;}



/*----------------------------*/

.cont04 {}
.cont04 .inner { max-width: 240.0000vw; height: 135.9375vw; margin: auto; position: relative; padding: 0 4.6875vw 7.8125vw; align-content: flex-end;}
.cont04 .inner .txt { display: inline-block; background: var(--color99_08); color: var(--color00_10); padding: 4.6875vw 12.5000vw; position: static;}
.cont04 .inner .txt h2 { font-size: 6.2500vw; margin-bottom: 7.8125vw;}
.cont04 .inner .txt h2::before { content: attr(data-en); font-size: 2.8125vw; color: var(--color01_10); display: block;}
.cont04 .inner .txt p {}
.cont04 .inner .txt .btn { width: 38.7500vw; height: 11.2500vw; margin: 7.8125vw 0 0 0;}
.cont04 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 7.8125vw; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont04 .inner .txt .btn a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 4.0625vw; position: absolute; right: 4.6875vw;}
.cont04 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont04 .inner .txt .btn a:hover::after { content: "\f061"; right: 3.1250vw;}




}




@media screen and (width: 640px) {

.kv { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 400px; z-index: 10; overflow: hidden;}
.kv::before { content: ""; position: absolute; top: 0; left: 0; z-index: 20; width: 50%; height: 100%; background-image: linear-gradient(90deg, #ffffff 50%, transparent);}
.kv::after { content: ""; width: 1000px; aspect-ratio: 100 / 15; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; position: absolute; bottom: 0; right: 0; z-index: 30; background: var(--color01_08);}
.kv .slick-list,
.kv .slick-track,
.kv .slick-slide { height: 100%; }
.kv .slider-kv { width: 100%; height: 100%;}
.kv .slider-kv li { width: 100%; height: 100%;}
.kv .slider-kv li img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center;}
.kv .txt { position: absolute; top: 200px; left: 30px; width: 100%; z-index: 20;}
.kv .txt .inner { max-width: 1536px; margin: auto;}
.kv .txt .inner h2 { font-size: 50px; letter-spacing: 0.2em; line-height: 70px; margin-bottom: 40px;}
.kv .txt .inner h2 span { color: var(--color01_10);}
.kv .txt .inner p { line-height: 36px;  color: var(--color99_10); text-shadow: 0 0 5px var(--color00_10), 0 0 10px var(--color00_10), 0 0 20px var(--color00_10), 0 0 40px var(--color00_10);}
.kv .scloll { position: absolute; left: 10; bottom: 100px; z-index: 50;}

.kv .scroll { position: absolute; right: 30px; bottom: 80px; z-index: 100; display: flex; flex-direction: column; align-items: center;}
.kv .scroll__text { writing-mode: vertical-rl; letter-spacing: 0.2em; color: var(--color00_10);}
.kv .scroll__line { position: relative; display: block; width: var(--com_px01); height: 80px; margin-top: 15px; background: var(--color00_10); overflow: hidden;}
.kv .scroll__line::after { content: ""; position: absolute; top: -10px; left: 0; width: var(--com_px01); height: 10px; background: var(--color99_10); animation: scrollLine 2s ease-in-out infinite;}

.kv .slider-kv { transition: filter 0.8s ease; }
.kv .slider-kv.is-highlight { filter: brightness(1.8); }


/*----------------------------*/

main { margin-top: 100vh;}

/*----------------------------*/

/*.cont01 { background: var(--color00_10) url("../images/index/cont01Bg.jpg") 0 0 no-repeat; background-size: cover; overflow: hidden;}*/
.cont01 { background: var(--color00_10) url("../images/index/cont01Bg_sp.jpg") center center no-repeat; background-size: cover; overflow: hidden; position: relative; margin: 0 0 70px;}
.cont01::before { content: "STRONG"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 320px; left: -400px; transform: rotate(90deg)}
.cont01 .inner { max-width: 1536px; margin: auto; height: 980px; display: flex; justify-content: center; align-items: center; padding: 0 100px;}
.cont01 .inner .txt { display: inline-block; background: var(--color00_08); padding: 30px 50px; margin: 0 auto; max-width: 850px; position: relative;}
.cont01 .inner .txt h2 { font-size: 40px; margin-bottom: 50px;}
.cont01 .inner .txt h2::before { content: attr(data-en); font-size: 18px; color: var(--color01_10); display: block;}
.cont01 .inner .txt p {}
.cont01 .inner .txt .btn { width: 248px; height: 72px; margin: 50px 0 0;}
.cont01 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont01 .inner .txt .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont01 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont01 .inner .txt .btn a:hover::after  { content: "\f061"; right: 20px;}


/*----------------------------*/

.cont02 { background: var(--color01_10); overflow: hidden;}
.cont02 .inner { position: relative;}
.cont02 .inner::before { content: "SERVICE"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: -110px; right: 20px;}
.cont02 .inner .txt01 { max-width: 1536px; margin: auto; padding: 90px 30px 110px; position: relative;}
.cont02 .inner .txt01 h2 { font-size: 40px; margin-bottom: 50px;}
.cont02 .inner .txt01 h2::before { content: attr(data-en); font-size: 18px; color: var(--color00_10); display: block;}
.cont02 .inner .txt01 p { padding-bottom: 30px;}
.cont02 .inner .txt01 .btn { width: 248px; height: 72px; position: static;}
.cont02 .inner .txt01 .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont02 .inner .txt01 .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont02 .inner .txt01 .btn a:hover { background: var(--color99_08);}
.cont02 .inner .txt01 .btn a:hover::after  { content: "\f061"; right: 20px;}

.cont02 .inner .box01 ul { width: 100%; display: flex; background: var(--color00_10); flex-direction: column;}
.cont02 .inner .box01 ul li { width: 100%; position: relative; height: 800px; overflow: hidden; margin-bottom: 30px;}
.cont02 .inner .box01 ul li::before { content: ""; width: 0; height: 0; border-top: 80px solid var(--color01_10); border-left: 80px solid transparent; position: absolute; top: 0; right: 0; z-index: 10;}
.cont02 .inner .box01 ul li a { display: block;}
.cont02 .inner .box01 ul li a .img	{ width: 100%; height: 100%;}
.cont02 .inner .box01 ul li a .img	img { width: 100%; height: 100%; object-fit: cover; }
.cont02 .inner .box01 ul li a .txt { width: 100%; background: var(--color01_08); padding: 80px 90px 90px 50px; box-shadow: 0px 0px 15px 0px var(--color99_09); position: absolute; bottom: -40px; right: -40px; transition: ease .5s; flex-grow: 1;}
.cont02 .inner .box01 ul li a .txt::after { content: "詳しくはこちら \f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; position: absolute; bottom: 14px; right: 30px;}
.cont02 .inner .box01 ul li a:hover .txt { transform: translate( -40px,-40px); transition: ease .5s;}
.cont02 .inner .box01 ul li a .txt h3 { font-size: 28px;}
.cont02 .inner .box01 ul li a .txt h3::before { content: attr(data-en); font-size: 16px; color: var(--color99_10); white-space: nowrap; display: block; line-height: normal; text-transform: uppercase;}
.cont02 .inner .box01 ul li a .txt p { margin-top: 20px;}
.cont02 .inner .box01 ul li a .txt p {}

.cont02 .inner .box02 { padding: 300px 30px 300px; background: url("../images/index/cont02_box02Bg.jpg") no-repeat; background-size: cover; position: relative;}
.cont02 .inner .box02::before { content: ""; width: 100%; height: 200px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}
.cont02 .inner .box02::after  { content: ""; width: 100%; height: 200px; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; bottom: 0; left: 0;}
.cont02 .inner .box02 .txt02 { text-align: center; margin-bottom: 100px;}
.cont02 .inner .box02 .txt02 h3 { font-size: 48px; color: var(--color00_10); margin-bottom: 50px; text-shadow: 2px 2px 1px var(--color99_09);}
.cont02 .inner .box02 .txt02 p { color: var(--color00_10); text-shadow: 2px 2px 1px var(--color99_09); text-align: left;}
.cont02 .inner .box02 ul { display: flex; justify-content: center; gap: 30px; flex-direction: column; align-items: center;}
.cont02 .inner .box02 ul li { width: 300px; box-shadow: 10px 10px 15px 0px var(--color99_09);}
.cont02 .inner .box02 ul li a {}

/*----------------------------*/

.bgSky { margin: 0 0 70px; background: var(--color00_10) url("../images/index/skyBg.jpg") bottom left no-repeat; background-size: cover; position: relative;}
.bgSky::before { content: ""; width: 100%; height: 200px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)); position: absolute; top: 0; left: 0;}

.cont03 { background: var(--color01_10); width: calc( 100% - 72px); padding: 100px 0 110px; border-radius: 0 80px 80px 0; position: relative;}
.cont03::before { content: "WORKS"; font-size: 230px; font-weight: 900; letter-spacing: normal; color: var(--color00_03); position: absolute; top: 390px; left: -350px; transform: rotate(90deg)}
.cont03 .inner { width: auto; margin: auto;}
.cont03 .inner .box { width: 50%; margin: 0 0 100px auto;}
.cont03 .inner .box h2 { font-size: 40px; margin-bottom: 50px;}
.cont03 .inner .box h2::before { content: attr(data-en); font-size: 18px; color: var(--color00_10); display: block;}
.cont03 .inner .box p {}

.cont03 .inner .works-slider-wrap { position: relative; width: 90%; margin: 0 auto 100px;}
.cont03 .inner .slider-works { margin: 0; padding: 0;}
.cont03 .inner .slider-works li { padding: 0 30px; box-sizing: border-box;}
.cont03 .inner .slider-works .img { width: 100%; aspect-ratio: 1 / 1; }
.cont03 .inner .slider-works .img img { width: 100%; height: 100%; object-fit: cover; }

.cont03 .inner .works-prev,
.cont03 .inner .works-next { position: absolute; top: 37%; transform: translateY(-50%); /*width: 50px; height: 50px;*/ border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 40px; line-height: 0; cursor: pointer; z-index: 10;}
.cont03 .inner .works-prev {left: 0px;}
.cont03 .inner .works-next {right: 0px;}
.cont03 .inner .works-prev:hover,
.cont03 .inner .works-next:hover {background: rgba(0,0,0,.8);}

.cont03 .inner .btn { width: 248px; height: 72px; margin: auto;}
.cont03 .inner .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color99_10); color: var(--color00_10); position: relative;}
.cont03 .inner .btn a::after  { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont03 .inner .btn a:hover { background: var(--color99_08);}
.cont03 .inner .btn a:hover::after  { content: "\f061"; right: 20px;}



/*----------------------------*/

.cont04 {}
.cont04 .inner { max-width: 1536px; height: 870px; margin: auto; position: relative; padding: 0 30px 50px; align-content: flex-end;}
.cont04 .inner .txt { display: inline-block; background: var(--color99_08); color: var(--color00_10); padding: 30px 80px; position: static;}
.cont04 .inner .txt h2 { font-size: 40px; margin-bottom: 50px;}
.cont04 .inner .txt h2::before { content: attr(data-en); font-size: 18px; color: var(--color01_10); display: block;}
.cont04 .inner .txt p {}
.cont04 .inner .txt .btn { width: 248px; height: 72px; margin: 50px 0 0 0;}
.cont04 .inner .txt .btn a { width: 100%; height: 100%; padding-left: 50px; display: flex; align-items: center; background: var(--color01_10); color: var(--color99_10); position: relative;}
.cont04 .inner .txt .btn a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 26px; position: absolute; right: 30px;}
.cont04 .inner .txt .btn a:hover { background: var(--color01_08);}
.cont04 .inner .txt .btn a:hover::after { content: "\f061"; right: 20px;}




}