body {
  --color-01: #ededed;
  --color-02: #FFD700;
}

.servicebtns {
    position: relative;
    display: flex;
    gap: 3rem 5rem;
    flex-wrap: wrap;
}

.servicebtns li{
	width:calc(100% / 3 - 3.333333rem);
}

.servicebtns .servicebtn {
  transition: color 0.2s ease;
  position: relative;
  cursor: pointer;
}

.servicebtns .servicebtn a {
padding: 2rem;
    display: block;
    background: #1111119e;
    border-left: 1px solid var(--accent);
    position: relative;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.servicebtns .servicebtn .num {
    position: absolute;
    left: 2rem;
    top: 2rem;
    font-size: 14px;
	font-family:var(--en);
	line-height:1;
}

.link-item{
	padding-left:5rem;
}

.servicebtns .servicebtn::selection {
  background: var(--accent, yellow);
}

.servicebtns .servicebtn img {
  display: none;
}

.serviceimg {
  width: 30vw;
  min-width: 70px;
  max-width: 200px;
  aspect-ratio: 4 / 3;
  position: fixed;
  z-index: -1;
  top: var(--top, 50vh);
  left: var(--left, 50vw);
  transform: translate(-50%, -50%);
  display: grid;
  opacity: 0;
  transition: top 0.2s ease-out, left 0.2s ease-out, opacity 0.2s ease;
}

.serviceimg .serviceimg-inner {
  background-color: black;
  transform: rotate(var(--rotation, 0deg));
  transition: transform 0.15s ease-out;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: var(--cover-1);
  display: grid;
  overflow: hidden;
}

.serviceimg .serviceimg-inner:before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: var(--cover-2);
  transition: transform 0s ease;
}

.serviceimg .serviceimg-inner.appear:before {
  transform: translateX(0%);
  transition: transform 0.2s ease;
}

.servicebtns:hover~.serviceimg {
  opacity: 1;
}

.servicebtns .servicebtn p {
  font-size: 2rem;
}

.servicebtns .servicebtn h3 {
  font-size: 12px;
font-family: "NotosansJP-R", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
}

.service-flex{
	align-items:center;
    margin-top: calc(15rem + 3.6875rem);
}

.service-flex .flex-l{
position: relative;
    aspect-ratio: 4 / 3;
}

.service-num{
line-height: 1 !important;
    display: inline-block;
    font-size: 7rem;
	font-family:var(--en);
}

.service-flex .service-num{
line-height: 1 !important;
    mix-blend-mode: difference;
    position: absolute;
    left: 2rem;
    top: -3.6875rem;
	font-family:var(--en);
}

.service-title{
    border-left: 1px solid var(--accent);
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

.service-title .sec-title-en{
	font-size: 2rem;
}

.service-title h3{
	font-size: 3rem;
    line-height: 1;
}

#service02,
#service04,
#service06{
flex-direction: row-reverse;
}

#service02 .service-num,
#service04 .service-num,
#service06 .service-num{
	left:initial;
    right: 2rem;
}

#service03 .l-flex .flex-l,
#service04 .l-flex .flex-l,
#service05 .l-flex .flex-l,
#service06 .l-flex .flex-l{
    width: calc(25% - 2.5rem);
}

#service03 .l-flex .flex-r,
#service04 .l-flex .flex-r,
#service05 .l-flex .flex-r,
#service06 .l-flex .flex-r{
    width: calc(75% - 2.5rem);
}

.dispatch-content:last-child{
	margin-top:5rem;
}

.choreography-img-wrap{
	display:flex;
	gap:3rem;
	flex-wrap:wrap;
	margin-top:5rem;	
}

.choreography-item{
	width:calc(100% / 2 - 1.5rem);
}

.choreography-item video{
	object-fit:cover;
	height:100%;
}

@media screen and (max-width:1600px) {

}

@media screen and (max-width:1400px) {

}

@media screen and (max-width:1200px) {
.servicebtns .servicebtn p {
    font-size: 1.6rem;
	margin-bottom:5px;
}
.service-title .sec-title-en {
     font-size: 1.6rem;
}
.service-title h3 {
    font-size: 2.5rem;
}
}

@media screen and (max-width:960px) {
.servicebtns {
    gap: 3rem;
}
.servicebtns li {
    width: calc(100% / 2 - 1.5rem);
}
.servicebtns .servicebtn p {
    font-size: 1.8rem;
}
.service-num {
    font-size: 6rem;
}
.servicebtns:hover~.serviceimg {
    opacity: 0;
}
.service-title .sec-title-en {
    font-size: 1.4rem;
}
.service-title h3 {
    font-size: 2rem;
}
.service-flex .service-num {
    top: -2.8875rem;
}
.service-flex {
    align-items: flex-start;
    margin-top: calc(10rem + 2.8875rem);
}
}

@media screen and (max-width:767px) {
.servicebtns li {
    width: 100%;
}
.servicebtns {
    gap: 1rem;
}
.service-num {
    font-size: 5rem;
}
.service-flex .service-num {
    top: -2.6875rem;
}
.service-title h3 {
    font-size: 1.6rem;
}
.service-title {
    border-left: initial;
    padding-left: initial;
    text-align: center;
    position: relative;
    padding-bottom: 2rem;
}
.service-title:before{
	content:"";
	position:absolute;
	bottom:0;
	left:50%;
	transform:translatex(-50%);
	height:1px;
	width:80px;
	background:var(--accent);
	}
.service-title .sec-title-en{
	margin-bottom:10px;
	}
.service-item {
    border-bottom: 1px solid #6E6E6E;
    padding-bottom: 7rem;
}
.service-item:last-child {
    border-bottom:initial;
    padding-bottom: initial;
}
.service-flex {
    margin-top: calc(7rem + 2.6875rem);
}
.servicebtns .servicebtn p {
    font-size: 1.6rem;
}
.servicebtns .servicebtn a {
    padding: 1rem 2rem;
}
.servicebtns .servicebtn .num {
    top: 1rem;
}
}