/*
Theme Name:   Recruit Twenty Twenty-Four Child
Theme URI:    https://example.com/twentyfour-child/
Description:  Child theme for the Twenty Twenty-Four theme
Author:       Your Name
Author URI:   https://example.com
Template:     twentytwentyfour
Version:      1.0.0


/* ----------------------------------------------------------------------------------
   Basic setting:
------------------------------------------------------------------------------------- */

/* reset:
--------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul,ol {list-style: none;}
em,address {font-style: normal;}

input[type="text"],input[type="submit"] {
border-radius: 0;
}
:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: initial;
    border-radius: initial;
    border-color: initial;
    border-width: initial;
    font-family: initial;
    font-size: initial;
    font-style: initial;
    font-weight: initial;
    line-height: initial;
    padding-top: initial;
    padding-right: initial;
    padding-bottom: initial;
    padding-left: initial;
}

/* Basic
--------------------------------------------*/

:root {
	--white: #ffffff;
	--black1: #2D3540;
	--black2: #4E5862;
	--gray1: #7C838B;
    --gray2: #CAD2DB;
	--gray3: #EBEEF5;
	--navy: #123456;
	--red: #D73767;
	--blue: #0080C8;
	--yellow: #FCFF71;
	--font-family: Helvetica , Arial , 'BIZ UDGothic', sans-serif;
	--gap:40px;
	--border: 1.5px solid var(--gray2);
	--shadow: 2px 5px 20px rgba(0, 0, 0, 0.15);
	--auto-fill: repeat(auto-fill, minmax(250px, 1fr));
}

html {
	position: relative;
	scroll-behavior: smooth;
}

body {
	position: relative;
	font-family: Helvetica, Arial, 'BIZ UDGothic', sans-serif;
}
@media (min-width: 768px) {
  html {
    font-size: calc(0.9375rem + ((1vw - 7.68px) * 0.2604));
    min-height: 0vw;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }
}
input,select {font-size: 1rem; font-family: var(--font-family);}


/*---- link button ----*/

a {color: var(--black1);text-decoration: underline;transition: all 300ms 0s ease;}
a:hover {text-decoration: none;}
a:focus-visible,
input:focus-visible,
button:focus-visible {outline: 2px var(--black2) solid;}

/*-- button --*/

button {border: none;background: none;transition: all 300ms 0s ease;font-family: var(--font-family);color: var(--black1);}
button:hover {cursor: pointer;}

/*---- img  ----*/

img {border: none;vertical-align: middle;}


.pc{display: block;}
.sp{display: none;}

/*-- icon --*/

:is(.icon,.icon_blank) {
	margin: 0 6px;
	vertical-align: middle!important;
	width: auto;
    height:24px;
}
.icon_blank{
    height:17px;
	margin-bottom: 3px;
}


/*-- iframe --*/
iframe {
    width: 100%;
    height: 300px;
    border: none;
}

/*-- リンク --*/
:root :where(.wp-element-button, .wp-block-button__link) {
	color: var(--black1);
	font-size: 1rem;
	text-decoration: none;
	padding: 1rem 1.5rem;
	
	box-shadow :var(--shadow);
  position: relative;
	transition: 0.3s ease-in-out;
    z-index:0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	background: var(--white);
}

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

/* header:
--------------------------------------------*/

header {
	background: rgba(255,255,255,.8);
}

header div{
	display: grid;
	grid-template-columns: 37% 1fr;
	align-items: center;
	max-width: 1366px;
    padding: 3% 0;
	    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    margin: 0 auto;
	box-sizing: content-box;
}

header .logo img{
	width: 100%;
}


/*--gnav--*/

#gnav {
	justify-self: end;
}

#gnav ul li{
	display: inline-block;
	margin-left: 2.3rem;
}

#gnav ul li:not(:last-child) a{
	text-decoration: none;
	position: relative;
	padding: 7px 0;
}

#gnav ul li:not(:last-child) a:before {
  background: var(--blue);
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

#gnav ul li:not(:last-child) a:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}

#gnav ul li:last-child a{
	text-decoration: none;
	padding: .5rem 1.5rem;
	background: var(--black2);
	color: var(--white);
	box-shadow :var(--shadow);
  position: relative;
	transition: 0.3s ease-in-out;
    z-index:0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}

#gnav ul li:last-child a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: var(--white);
    transition: .3s;
    left:0;
}
#gnav ul li:last-child a:hover {
    color: var(--black2);
}
#gnav ul li:last-child a:hover:before {
    width: 100%;
    z-index: -1;
}


header .menu {
	display: none;
} 

@media screen and (max-width: 767px) {
	
	#gnav {
		display: none;
	}
	header .menu {
		display: block;
	} 
	header .menu button img {
		width: 45px;
		height: 45px;
	}
	header .menu .close {
		display: none;
	}

}

/*---- gdpr ----*/

#gdpr {
	display: block;
	background: rgba(0, 0, 0, 0.8);
	left: 0;
	right: 0;
	bottom: 3%;
	z-index: 100;
	border-radius: var(--maru);
	position: fixed;
	text-align: center;
	max-width: 1366px;
	margin: 0 auto;
}

#gdpr p {
	text-align: left;
	color: var(--white)!important;
}

#gdpr button {
	color: var(--white);
	padding: 1rem;
	min-width: 10rem;
	margin-top: 2rem;
	border: var(--border);
	font-size: 1rem;
}

#gdpr button:hover {
	background: rgba(0, 0, 0, 0.9);
}

#gdpr a {
	text-decoration: underline;
	color: var(--white);
}

#gdpr a:hover {
	text-decoration: none;
}

@media (max-width: 767px) {
	#gdpr {
		padding: 2rem 3% 1rem;
	}
}

/* footer:
--------------------------------------------*/

footer {
	text-align: center;
	max-width: 1366px;
    padding: 5rem 0 1%;
	padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    margin: 0 auto;
}

footer .logo img{
	width: 80%;
	max-width: 380px;
}

footer .sub{
	padding: 4rem 0 1rem;
	margin: 0 auto;
}

footer .sub li{
	display: inline-block;
	margin: 0 1rem 1rem;
}

footer .sub li a{
	text-decoration: none;
}

footer .sub li a:hover{
	text-decoration: underline;
}

@media (min-width: 960px) {
	footer .sub{
		width: 80vw;
	}
}

@media (min-width: 1280px) {
	footer .sub{
		width: 60vw;
		margin: 0 auto;
	}
}


#page_top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 99;
}

#page_top a {
	display: block;
	width: 45px;
	height: 45px;
}

#page_top a img{
	width: 45px;
	height: 45px;
}

footer #copy small {
	color: var(--black2);
	font-size: .8rem;
}


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

#news li {
	padding-left: 0;
	margin-bottom: 0;
}

#news li:before {
    display: none;
}

#news li a {
	display: grid;
	grid-template-columns: 8rem auto 1fr;
    border-bottom: var(--border);
	padding: 1rem;
	position: relative;
}

#news li a:before {
  background: var(--blue);
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -1px;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

#news li a:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}

#news li a time {
	margin-right: 1rem;
	color: var(--black2);
}

#news li a svg{
	align-self: center;
}

/* ----------------------------------------------------
   インタビュー setting
------------------------------------------------------- */

main .interview_list :is(h2,h3){
	padding: 0!important;
	font-size: 1.1rem;
	font-weight: 500;
}
main .interview_list .is-layout-flex {
    gap: .5rem!important;
}

main .interview_list .wp-block-group figure {
  aspect-ratio: 1 / 1;
        overflow: hidden;
      }

main .interview_list .wp-block-group img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main .interview_list .wp-block-group > p:nth-of-type(1) {
	font-size: .9rem;
	line-height: 1.4;
	color: var(--black2);
}
main .interview_list .wp-block-group > p:nth-of-type(2) {
	font-size: 1.1rem;
	line-height: 1.4;
	margin-top: .5rem;
}


@media (max-width: 1280px) {
	header div{
		grid-template-columns: 42% 1fr;
		grid-column-gap: 1rem;
	}
}

@media (max-width: 959px) {
	#gnav ul li {
		margin-left: 1rem;
	}
	.has-large-font-size {
		font-size: 1rem!important;
		line-height:1.4;
	}
	.has-x-large-font-size {
		font-size: 1.2rem!important;
		line-height:1.5;
	}
}

@media (max-width: 767px) {
	header div{
		grid-template-columns: auto 45px;
		padding: 3% 0 6%;
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
	}
	header .logo img {
		width: 100%;
		max-width: 420px;
	}
	#gnav {
		width: 100%;
		grid-column: 1 / 3;
		margin-top: 1rem;
	}
	#gnav ul li{
		display:block;
		margin-left: 0;
	}
	#gnav ul li a{
		display: block;
		width: 100%;
	}
	#gnav ul li:not(:last-child) a{
		padding: 1.5rem 1rem;
		border-top:var(--border);
	}
	#news li a {
		grid-template-columns: auto 1fr;
	}
	#news li a time {
		margin-right: 0;
		grid-column: 1 /3;
	}
}