/* ----------------------------------------------------------------------------------
   index setting:
------------------------------------------------------------------------------------- */


/* outline:
--------------------------------------------*/

#main_v,
#works,
#news,
#style,
#interview,
#message {
	margin: 0 auto;
    max-width: 1366px!important;
	width: 100%;
}

@media (max-width: 1366px) {
	#news,
	#style,
	#interview,
	#message {
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
	}
	
	main #works > div{
		padding-left: var(--wp--style--root--padding-left);
	}
	
	main #style > div{
		padding-right: var(--wp--style--root--padding-right);
	}
}

#works .has-global-padding,
#style .has-global-padding {
    padding: 0!important;
}

/* element:
--------------------------------------------*/

a {text-decoration: none;}

main h2 {
	position:relative;
	padding: 0 0 2rem!important;
	font-size: 2rem;
	background: url(/common/img/recruit/ellipse.svg) bottom 4.5px left 2px no-repeat;
    background-size: 8px;
}
main h2:before {
	position:absolute;
    bottom: 0;
    left: 20px;
    color: var(--gray1);
    font-size: 1.2rem;
    background: none !important;
    width: auto;
    height: auto;
    border-radius: 0;
}


/*main_v:
--------------------------------------------*/
#main_v {
	margin-bottom:3rem;
}


/* message:
--------------------------------------------*/

main #message {
	text-align: center;
}

@media (min-width: 768px) {
	main #message p{
		font-size: 1.1rem;
	}
}


/* news:
--------------------------------------------*/

main #news {
	margin: 5rem auto!important
}

main #news h2:before {
	content: "News";
}

#news ul {
	border-top: var(--border);
}


/* works:
--------------------------------------------*/

main #works {
	margin: 0 auto 2rem;
}

main #works h2:before {
	content: "Jobs";
}


/* style:
--------------------------------------------*/

main #style h2:before {
	content: "Work style";
}

@media (min-width: 768px) {
	main #style .right{
		order: 1;
	}
	main #style .left{
		order: 2;
	}
}


/* works & style:
--------------------------------------------*/

    
main :is(#works,#style) h2 {
margin-top: 3.5rem;
}

main :is(#works,#style) p {
margin: 2rem 0;
}

main :is(#works,#style) div {
position: relative;
	gap: 4rem!important;
}

main :is(#works,#style) {
max-width: none!important;
width: 100%;
padding-left: calc((100vw - 1366px) / 2);
padding-right: calc((100vw - 1366px) / 2);
box-sizing: border-box;
position: relative;
}

main :is(#works,#style):before {
content: "";
display: block;
position: absolute;
background: #EBEEF5;
width: 60%;
height:70%;
top: 0;
}
main :is(#works,#style) figure {
position: relative;
z-index: 1;
background: #FFF;
margin-top: 100px;/**/
}

main #works:before {
left:0;
}
main #style:before {
right: 0;
}

@media (max-width: 767px) {
	main :is(#works,#style) figure {
		width: 80%;
        margin: 20px auto 0;		
	}
}

/* interview:
--------------------------------------------*/

main #interview{
	margin: 5rem auto 0!important
}

main #interview h2:before {
	content: "Interview";
}

/*手動スライド*/
.flickity-enabled {
	position: relative;
  }
  
  .flickity-enabled:focus { outline: none; }
  
  .flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%;
  }
  
  .flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
  }
  
  /* draggable */
  
  .flickity-enabled.is-draggable {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
	cursor: -webkit-grabbing;
	cursor: grabbing;
  }
  
  /* ---- flickity-button ---- */
  
  .flickity-button {
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	border: var(--black1) 1.5px solid;
  }
  
  .flickity-button:hover {
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
  }
  
  .flickity-button:active {
	opacity: 0.6;
  }
  
  .flickity-button:disabled {
	opacity: 0.3;
	cursor: auto;
	/* prevent disabled button from capturing pointer up event. #716 */
	pointer-events: none;
  }
  
  .flickity-button-icon {
	fill: var(--black1);
  }
  
  /* ---- previous/next buttons ---- */
  
  .flickity-prev-next-button {
	top: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* vertically center */
	transform: translateY(-50%);
  }
  
  .flickity-prev-next-button.previous { left: 10px; }
  .flickity-prev-next-button.next { right: 10px; }
  /* right to left */
  .flickity-rtl .flickity-prev-next-button.previous {
	left: auto;
	right: 10px;
  }
  .flickity-rtl .flickity-prev-next-button.next {
	right: auto;
	left: 10px;
  }
  
  .flickity-prev-next-button .flickity-button-icon {
	position: absolute;
	left: 30%;
	top: 30%;
	width: 40%;
	height: 40%;
  }
  
  /* ---- page dots ---- */
  
  .flickity-page-dots {
	position: absolute;
	width: 100%;
	bottom: -25px;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1;
  }
  
  .flickity-rtl .flickity-page-dots { direction: rtl; }
  
  .flickity-page-dots .dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 7px;
	background: var(--gray1);
	  opacity: .3;
	cursor: pointer;
	  border-radius: 50%;
  }
  
  .flickity-page-dots .dot.is-selected {
	opacity: 1;
  }

.gallery {
	margin: 2rem 0 1rem;
	transition: all 300ms 2s ease
}

.gallery-cell {
  width: 31.5%;
  margin-right: 3%;
	position: relative;
}

.gallery-cell span{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255,255,255,0.9);
	padding: 1rem 0.5rem;
	font-size: 1.1rem;
	color: var(--navy);
}

.gallery-cell img{
	object-fit: cover;
	aspect-ratio: 1/1;
	width: 100%;
}

.gallery-cell:hover img{
	opacity: 0.85;
}

li.dot {
  pointer-events: none;
}
 

/* message:
--------------------------------------------*/

main #entry {
	text-align: center;
	padding: 4% 3% 0;
}


main #entry .wp-block-button__link{
	text-decoration: none;
	padding: 1rem;
	background: var(--black2);
	color: var(--white);
	box-shadow :var(--shadow);
  position: relative;
	transition: 0.3s ease-in-out;
    z-index:0;
    margin: 0 auto;
	min-width: 15rem;
	font-size: 1.3rem;
	display: block;
	line-height: 1;
}

main #entry .wp-block-button__link :lang(en){
	font-size: 1rem;
	color: var(--gray2);
}


main #entry .wp-block-button__link:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: var(--white);
    transition: .3s;
    left:0;
}
main #entry .wp-block-button__link:hover {
    color: var(--black2);
}
main #entry .wp-block-button__link:hover:before {
    width: 100%;
    z-index: -1;
}


@media (max-width: 959px) {
	.gallery-cell {
		width: 49%;
		margin-right: 2%;
	}
}

@media (max-width: 767px) {
	main :is(#works,#style) div {
		grid-template-columns: 1fr;
		gap: 0 !important;
	}
	main :is(#works,#style):before {
		width: 85%;
		height: 60%;
		top: 3%;
	}
	main #style > div {
        padding-left: var(--wp--style--root--padding-left);
    }
		main :is(#works,#style) h2 {
		margin-top: 2.5rem;
	}
	.gallery-cell {
        width: 100%;
        margin-right: 0;
    }
	main #entry {
		text-align: center;
		padding: 8% 3% 0;
	}
}