/*
Theme Name: gakusen
Template: sydney
Version: 20260309
*/

:root {
	--main-color: 0 148 127;
	--bg-color: 245 240 230;
	--bg-dark-color: 215 210 195;
	--border-radius: 20px;
	--border-radius-xl: 200px;
	--margin-s: 20px;
	--margin-m: min(8vw,40px);
	--margin-l: 80px;
	--margin-xl: 140px;
    --transition: .2s;
}
.dept-children{ 
	--dept-color: #ED1374;
}
.dept-nutrition{ 
	--dept-color: #1465A7;
}
.dept-lifestyle{ 
	--dept-color: #62A714;
}
.dept-yo{ 
	--dept-color: #E66690;
}
.dept-shoku{ 
	--dept-color: #1D91DF;
}
.dept-sogo{ 
	--dept-color: #00a75a;
}
.dept-children,.dept-nutrition,.dept-lifestyle,.dept-yo,.dept-shoku,.dept-sogo {
	--font-color: #fff;
	--sharp-color: var(--bg-color);
}

body {
    font-family: "Zen Kaku Gothic Antique", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    font-display: swap;
}

/* reset */
i.fa {
	margin-left: .5em;
	position: relative;
	top: -.05em;
}
ul {
	list-style: none;
}
#content {
	padding-bottom: 0;
	& .container {
		width: 100%;
		max-width: 1140px;
	}
}
body.archive .row {
	margin: 0;
}
.no-sidebar .page-wrap {
	overflow-x: unset;
}
body.home #content {
	padding-top: 0;
	position: relative;
	z-index: 1;
}
body.home {
	background: none !important;
}
body.home h1,
body.archive h1{
	position: relative;
	margin-top: 0 !important;
}
body.home h1 + p {
	margin-block-start: 0;
	text-align: center;
	font-weight: 900;
}
body.single-interview {
	overflow-x: hidden;
}
body.archive #primary{
	max-width: unset;
	padding: 0 !important;
}
header {
	box-shadow: unset !important;
	z-index: 2;
}
.entry-footer {
	display: none;
}
.content-area .post-wrap {
	padding-right: 0 !important;
}
.single .hentry {
    margin-bottom: 0 !important;
}
#page {
	overflow: clip;
}
#content {
	position: relative;
}
main#main {
	margin-bottom: 120px;
}
.single-interview main#main {
	margin-bottom: 0;
}
.page .entry-header, .single .entry-header {
	display: none;
}

/* button-style */
.nav-links .page-numbers {
	width: 40px !important;
	height: 40px !important;
	border-radius: 100%;
}
.nav-links .page-numbers:not(.next):not(.prev) {
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-links a.next.page-numbers,
.nav-links a.prev.page-numbers{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}
.nav-links a.next.page-numbers::after,
.nav-links a.next.page-numbers::before,
.nav-links a.prev.page-numbers::after,
.nav-links a.prev.page-numbers::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
	background: #fff;
	width: .5em;
	height: .1em;
	transform-origin: right;
}
.nav-links a.next.page-numbers::before,
.nav-links a.prev.page-numbers::before{
	transform: translate(-50%,-50%) rotate(-45deg);
}
.nav-links a.prev.page-numbers::before,
.nav-links a.prev.page-numbers::after{
	transform-origin: left;
}
.nav-links,.navigation.front-page {
	margin: 80px auto 0 !important;
}
.navigation.front-page .nav-links a {
	color: #fff !important;
}
.navigation.front-page .nav-links a:hover {
	background: rgb(var(--main-color));
}
a.wp-block-button__link {
	font-weight: normal !important;
}
a.wp-block-button__link {
	border-width: 1px !important;
}
.inner-link-button {
	display: none !important;
}
.inner-link-button .wp-block-button{
	background: #333;
	transition: var(--transition);
}
.inner-link-button .wp-block-button a{
	color: #fff !important;
	padding: .8em 1.5em;
}
.inner-link-button .wp-block-button:hover {
	background: var(--sydney-global-color-1);
}
ul.interview-list li p.name .read,
.inner-link-button a,
.menu-button-content nav > ul > li:first-child a {
	display: flex;
	align-items: center;
	position: relative;
}
ul.interview-list li p.name .read::after,
.inner-link-button a::after,
.menu-button-content nav > ul > li:first-child a::after,
ul.interview-list li p.name .read::before,
.inner-link-button a::before,
.menu-button-content nav > ul > li:first-child a::before{
	content: "";
	height: 1px;
	width: 1.5em;
	display: inline-block;
	position: absolute;
	transition: var(--transition);
}
ul.interview-list li p.name .read::before,
.inner-link-button a::before,
.menu-button-content nav > ul > li:first-child a::before {
	width: .5em;
	transform: rotate(30deg);
	transform-origin: right;
}
.inner-link-button a {
	padding-right: 4.5em !important;
}
.inner-link-button a::after,
.inner-link-button a::before{
	background: #fff;
	right: 2em;
}
.inner-link-button a:hover::after,
.inner-link-button a:hover::before{
	right: 1.5em;
}
ul.interview-list li p.name .read {
	padding-bottom: 1em;
}
ul.interview-list li p.name .read::after,
ul.interview-list li p.name .read::before {
	background: #333;
	bottom: 1.2em;
	right: calc((100% - 1.5em)/2);
}
ul.interview-list li a:hover p.name .read::after,
ul.interview-list li a:hover p.name .read::before {
	background: #fff;
	right: calc((100% - 1.5em)/2 - 6px);
}
.menu-button-content nav > ul > li:first-child a::after,
.menu-button-content nav > ul > li:first-child a::before{
	background: #fff;
	right: 1.5em;
	top: calc(50% + .8em);
}
.menu-button-content nav > ul > li:first-child a::before {
	width: 1.5em;
}
.menu-button-content nav > ul > li:first-child a::after {
	width: 5em;
}
.menu-button-content nav > ul > li:first-child a:hover::after,
.menu-button-content nav > ul > li:first-child a:hover::before {
	background: var(--sydney-global-color-1);
	right: 0em;
}
.site-branding {
	gap: 1.5em !important;
}
.go-top.position-right {
	border-radius: 20px 0px 0px 20px !important;
	padding: 1em 1em .8em 1em;
	right: 0;
	height: auto;
	display: flex;
	flex-direction: row-reverse;
	gap: .5em;
	align-items: center;
	justify-content: center;
	z-index: 999;
}
.go-top.position-right span {
	margin: 0;
	font-size: .8rem;
	top: -3px;
	position: relative;
}
.go-top.position-right:hover {
	background: rgb(var(--main-color));
	color: #fff;
	& svg {
		stroke: #fff;
	}
}
.go-top .sydney-svg-icon,
.go-top .sydney-svg-icon svg{
	width: 20px;
	height: 20px;
	top: -1px;
	position: relative;
}
.go-top .sydney-svg-icon svg path {
	transition: var(--transition);
}

/* animations */
.fadeIn,.fadeUp,.fadeInPop {
	opacity: 0;
}
.fadeInPop {
	transform: scale(0);
}
.fadeIn.animeOn {
	animation: fadeInAnime .5s .2s cubic-bezier(0, 0.97, 0, 0.99) forwards;
}
.fadeUp.animeOn,
body.archive ul.interview-list li{
	animation: fadeUpAnime .5s forwards;
}
.fadeInPop.animeOn{
	animation: fadeInPopAnime cubic-bezier(0, 0.97, 0, 0.99) .5s .2s forwards;
}
@keyframes fadeInPopAnime{
  from {
    opacity: 0;
		transform: scale(0);
  }
  to {
    opacity: 1;
		transform: scale(1);
  }
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  	transform: translateY(180px);
  }
  to {
    opacity: 1;
  	transform: translateY(0);
  }
}
@keyframes mvAnime{
  from {
    background-position: 0 0;
  }
  to {
    background-position: -500vw 0;
  }
}
@keyframes mvAnime_sp{
  from {
    background-position: top 100px left;
  }
  to {
    background-position: top 100px left -500vw;
  }
}
@keyframes bgExpandAnime{
  from {
	background-position: 100% 100%;
  }
  to {
	background-position: 0 0;
  }
}
@keyframes bgExpandAnime2{
  0% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
	background-position: -100% -100%;
    visibility: hidden;
  }
}
.bgExpandTrigger {
	opacity: 0;
	transition: .5s;
}
.bgExpand {
	opacity: 1;
}
span.bgExpand,
p.bgExpand{
	animation: bgExpandAnime .6s forwards;
}
.bgExpand::before{
	animation: bgExpandAnime2 1s forwards;
}
body.home ul.interview-list li.bgExpand::before {
	animation: none;
}
body.home ul.interview-list li.bgExpand::after {
	animation: bgExpandAnime2 1s forwards;
    border:none;
	background: linear-gradient(to right, #333 50%, transparent 50%);
	background-position: 100% 100%;
	background-size: 200% 100%;
}
@keyframes loadingAnime {
  0% {
	color:rgb(255 255 255 / 80%);
  }
  50% {
	color:rgb(255 255 255 / 20%);
  }
  100% {
	color:rgb(255 255 255 / 80%);
  }
}
@keyframes bgMovie {
  0% {
	  object-position: left;
  }
  100% {
	  object-position: right;
  }
}


/* header */
header#masthead {
	height: 100px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 0;
}
body.home header#masthead {
	background: #fff;
}
body:not(.home) header#masthead {
	mix-blend-mode: multiply;
}
header .row.valign::before,
header .row.valign::after{
	display: none;
}
header .row {
	margin-right: 0;
}
.container-fluid {
	width: 100%;
}
.site-branding-text .site-title {
	display: none;
}
.site-branding-text .site-description {
	letter-spacing: .15em;
	margin: 0;
}

/* menu-button */
.header-col.header-elements {
  padding: 0 !important;
	position: relative;
	right: -15px;
	display: flex;
	align-items: center;
	@media (min-width: 992px) {
		right: -40px;
	}
}
header a[href$="#openmenu"] {
	z-index: 5;
	border: none;
  width: 100px;
  height: 100px;
	padding: 0;
	display: block;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 1.5em;
	letter-spacing: .15em;
}
header a[href$="#openmenu"]::before,
header a[href$="#openmenu"]::after{
	content: "";
	display: block;
	width: 3.5em;
	height: 1px;
	background: #fff;
	position: relative;
	transition: var(--transition) ease-out;
}
header a[href$="#openmenu"]::before {
	order: -2;
	top: -1.3em;
}
header a[href$="#openmenu"].opened::before,
header a[href$="#openmenu"].opened::after {
	width: 1.33em;
}
header a[href$="#openmenu"].opened::before {
	transform: translateX(.1em) rotate(45deg);
	transform-origin: left;
}
header a[href$="#openmenu"].opened::after {
	transform: translateX(.1em) rotate(-45deg);
	transform-origin: left;
}
header a[href$="#openmenu"]::after {
	order: -1;
	top: -.5em;
}
header a[href$="#openmenu"]:hover {
	background: var(--sydney-global-color-3);
	color: #fff;
}
header a[href$="#openmenu"].opened {
	position: fixed;
}
.menu-button-content {
  width: 100%;
  height: 100%;
	position: absolute;
	top: -100%;
	opacity: 1;
	transition: .5s;
	z-index: -1;
}
.menu-button-content.opened {
  background: rgb(6 26 40 / 85%);
  position: fixed;
	opacity: 1;
	z-index: 4;
	top: 0;
}
.menu-button-content nav > ul{
	width: 100%;
	max-width: 720px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding-right: 40px;
}
.menu-button-content nav ul.list-tags {
	justify-content: flex-start;
	margin: 1em 0;
}
.menu-button-content nav ul.list-tags li a{
	font-size: .9em;
}
.menu-button-content nav li,
.menu-button-content nav li a{
	color: #fff;
}
.menu-button-content nav > ul > li:first-child a {
	position: relative;
	display: block;
}
.menu-button-content nav > ul > li:first-child a:hover::after {
	color: var(--sydney-global-color-1);
}
.menu-button-content nav span {
	letter-spacing: 2px;
}
.menu-button-content nav li span:first-child {
	font-size: 3rem;
}
.menu-button-content nav li span:nth-child(2) {
	margin-left: 1em;
	font-size: .9rem;
}
.menu-button-content > nav > ul > li:last-child {
	padding-top: 2em;
}
.menu-button-content a.textlink:hover span,
.menu-button-content nav li.cate:hover span{
	color: var(--sydney-global-color-1) !important;
}
.menu-button-content span{
	transition: var(--transition);
}
.menu-button-content a.external-link {
	font-size: .8em;
}

/* hero-area */
.sydney-hero-area {
	position: relative;
}
.inside-hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 2rem;
}
.inside-hero-content p {
	margin: 0;
}

/* front-mv-box */
.front-mv-box {
	height: calc(100svh - 100px) !important;
	max-height: 800px !important;
	overflow: visible;
	container-type: size;
	container-name: front-mv-box;
	position: relative;
	& .wrapper {
		width: 100%;
		max-width: 1300px;
		margin: auto;
		padding-left: var(--margin-m);
		position: relative;
		top: -20px;
		z-index: 2;
		& .main-title {
			font-size: min(4.5vw,3.5rem) !important;
			font-weight: 900;
			position: relative;
			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 100%;
				bottom: 0;
				transform: translateX(-40%);
				width: 10rem;
				aspect-ratio: 241/172;
				background: url(./images/deco05.svg) no-repeat center / contain;
			}
		}
	}
}
.front-mv-box .wp-block-cover__inner-container{
	position: static;
}
.front-mv-box::before,
.leading-text-box::before,
.leading-text-box::after{
	content: "";
	display: block;
	width: 100vw;
	height: 100%;
	background: rgb(var(--bg-color));
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}
.front-mv-box::before {
	top: -100px;
	height: calc(100% + 100px);
}
.leading-text-box::before {
	top: unset;
	bottom: calc(100vw*214/1284 + 40px);
}
.leading-text-box::after {
	top: unset;
	bottom: 40px;
	width: 100vw;
	height: auto;
	aspect-ratio: 1284/214;
	background: url("./images/separater.svg") no-repeat bottom center / cover;
	background: rgb(var(--bg-color));
}

/* leading-text-box */
.leading-text-box {
	padding: 80px 0 0;
	position: relative;
	z-index: 0;
}
.leading-text-box > div {
	position: relative;
	z-index: 1;
}
.leading-text-box .wrapper {
	max-width: 1140px;
	margin: auto;
	& .inner-box{
		max-width: unset;
		gap: 140px;
	}
}
.leading-text-box .title-box{
	gap: 120px;
	width: 100%;
	& .title {
		gap: var(--margin-s);
		font-size: 2.5rem;
		font-weight: 900;
		line-height: 1.3;
		position: relative;
		width: 100%;
		&::before {
			content: "";
			display: block;
			width: 104vw;
			height: auto;
			aspect-ratio: 1110/451;
			background: url(./images/blob-heroarea.svg) no-repeat center / contain;
			position: absolute;
			top: 40%;
			transform: translateY(-50%);
			z-index: -1;
		}
		& .tag {
			font-family: Montserrat, sans-serif;
			font-size: 1.25rem;
			font-weight: 800;
			line-height: 1.8;
			letter-spacing: 5px;
			&::before,&::after {
				content: "";
				display: block;
				position: absolute;
			}
			&::before {
				aspect-ratio: 847/317;
				width: 15vw;
				top: 20%;
				right: 0%;
				transform: translate(50%,-100%);
				background: url(./images/item04.svg) no-repeat center / contain;
			}
			&::after {
				aspect-ratio: 314/303;
				width: 80px;
				left: 16%;
				top: 30%;
				background: url(./images/deco01.svg) no-repeat center / contain;
			}
		}
	}
	& .text-wrapper {
		display: none;
		& figure {
			position: relative;
			display: block;
			align-self: stretch;
			flex: 1;
			& > * {
				position: absolute;
			}
			& img {
				width:100px;
			}
			&.left {
				& img[src*="photo02"] {
					aspect-ratio: 5/3;
					width: 90%;
					border-radius: 0 var(--border-radius) var(--border-radius) 0;
					top: 50%;
					transform: translateY(-50%);
					left: calc(-1*((100vw - 1140px)/2));
					object-fit: cover;
					object-position: top 30% left 50%;
				}
				& img[src*="deco02"] {
					aspect-ratio: 55/160;
					width: 70px;
					top: 100%;
					left: 0;
					transform: translate(-50%,-4%) rotate(-20deg);
				}
				& img[src*="deco06"] {
					aspect-ratio: 98/187;
					width: 100px;
					bottom: 100%;
					left: calc(-1*((100vw - 1140px)/2.5));
					transform: translateY(4%);
				}
				& svg {
					top: 65%;
					left: 50%;
					transform: translateY(-50%);
				}
			}
			&.right {
				& img[src*="ppl05"] {
					right: calc(-1*((100vw - 1140px)/4));
					bottom: 0;
					width: 100%;
					height: calc(100% + var(--margin-xl));
					transform: translateX(10%);
					z-index: 1;
				}
				& img[src*="deco09"] {
					width: 60px;
					right: 0;
					top: 100%;
					transform: scale(-1,1) translate(100%,60%);
				}
				& img[src*="deco12"] {
					width: 100px;
					right: calc(-1*((100vw - 1140px)/2));
					bottom: 100%;
					transform: translateY(20%) rotate(30deg);
				}
			}
		}
		& .text {
			flex-shrink: 0;
			gap: var(--margin-m);
			opacity: 0;
		}
	}
}
.leading-text-box .feature-box {
	width: 100%;
	justify-content: center;
	display: none;
}
.leading-text-box .feature-box .feature{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	border-radius: var(--border-radius);
	background: var(--dept-color) !important;
	&::before {
		content: "";
		display: block;
		width: 60%;
		height: auto;
		aspect-ratio: 657/525;
		background: #ccc;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%,-88%);
	}
	&.dept-lifestyle::before {
		background: url(./images/feature01.png) no-repeat bottom center / cover;
	}
	&.dept-nutrition::before {
		background: url(./images/feature02.png) no-repeat bottom center / cover;
	}
	&.dept-children::before {
		background: url(./images/feature03.png) no-repeat bottom center / cover;
	}
}
.leading-text-box .feature-box .bg-wrapper{
	padding: 40px 30px 30px;
	margin: 0;
	aspect-ratio: 1;
	& .title {
		width: 100%;
		height: 100%;
		justify-content: flex-end;
		gap: 38px;
		& .sub::after{
			content: ":::::::::::::::::";
			display: block;
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			font-size: .7em;
		}
	}
}
.leading-text-box .feature-box svg:has(textPath) {
	position: absolute;
	top: 40px;
	& text {
		font-size: 1.4rem;
		fill: #fff;
		letter-spacing: 5px;
	}
}
.leading-text-box .feature-box p:last-child {
	line-height: 1.5;
}
.leading-text-box .feature-box .movie-container {
	border-radius: 40px;
	overflow: hidden;
}
.leading-text-box .feature-box .movie-container .title p {
	font-size: 1.6rem;
}
.leading-text-box .feature-box .movie-container .bg-wrapper {
	position: relative;
	z-index: 1;
	flex-wrap: nowrap;
	justify-content: space-around;
	gap: 10px;
}
.leading-text-box .feature-box .movie-container .bg-wrapper::before {
	content: "";
	display: block;
	background: #333;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	opacity: .4;
}
.leading-text-box .feature-box>div {
	position: relative;
}

/* frontpage */
body.home #content::before,
body.home #content::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
body.archive #content {
	padding-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	overflow: visible;
	z-index: 1;
}
main {
	margin-bottom: 80px;
}
body.home main {
	padding-right: 0 !important;
}
body.home .entry-content::before {
	/*content: "";*/
	width: 500px;
	margin: 0 calc(50% - 50vw);
	height: 300px;
	display: block;
	background: #ccc;
	position: absolute;
	left: 0;
	bottom: 100%;
}
body.home ul.interview-list {
	max-width: unset;
}
section.archives {
	position: relative;
	margin-bottom: 0;
	& .title {
		gap: 8px;
		font-weight: 900;
		line-height: 1.3;
		position: relative;
		width: 100%;
		min-height: min(200px,16vw);
		justify-content: center;
		@media only screen and (max-width: 600px) {
			min-height: 200px;
		}
		&::before {
			content: "";
			display: block;
			max-width: calc(100vw - min(300px,20vw)*2 - 120px);
			height: min(200px,16vw);
			aspect-ratio: 300/97;
			background: url(./images/site-title-pc.svg) no-repeat center / contain;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 3;
			@media only screen and (max-width: 600px) {
				background: url(./images/site-title-sp.svg) no-repeat center / contain;
				aspect-ratio: 166/150;
				height: 200px;
				width: auto;
				max-width: 60vw;
			}
		}
		& .line01,& .line02 {
			margin: 0;
		}
		& .line01 {
			font-size: 1.5rem;
		}
		& .line02 {
			font-size: 2.8rem;
			letter-spacing: 4px;
			& span:first-child {
				color: #216dad;
			}
			& span:last-child {
				font-size: 3.4rem;
				color: #36ae80;
				font-family: Montserrat, sans-serif;
				padding-left: .2em;
				
			}
		}
		& .tag {
			font-family: Montserrat, sans-serif;
			font-size: 1rem;
			font-weight: 800;
			line-height: 1.8;
			letter-spacing: 3px;
		}
		& .lines,& .tag {
			visibility: hidden;
		}
	}
	& .slogan {
		position: relative;
		z-index: 3;
		font-size: 1.3rem;
		@media only screen and (max-width: 1024px) {
			margin-top: 8px !important;
		}
		@media only screen and (max-width: 820px) {
			& .sp-br {
				display: block;
				line-height: 1;
			}
		}
		@media only screen and (max-width: 600px) {
			display: inline-block;
			text-align: left;
			font-size: .9em;
		}
	}
}

section.archives .wp-block-group__inner-container {
	z-index: 2;
	position: relative;
}
section.archives h1 {
	text-align: center;
}
section.archives h1 + p{
	margin-bottom: 100px;
}
section.archives .h1-block {
	margin-bottom: var(--margin-l);
	max-width: unset;
	z-index: 1;
	text-align: center;
}
section.archives .h1-block > .wp-block-group__inner-container{
	display: flex;
	flex-direction: column;
	align-items: center;
}
section.archives .h1-block .h1-wrapper{
	margin: 0 !important;
	max-width: unset;
}
section.archives .h1-block .about-movie-text {
	font-size: .8em;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 2;
}
section.archives .h1-block .about-movie-text>div {
	display: flex;
	gap: 1em;
	align-items: center;
}
section.archives .h1-block .about-movie-text p {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	padding: 0 1rem !important;
	display: inline-block;
}
section.archives .h1-block .about-movie-text p::before,
	section.archives .h1-block .about-movie-text p::after {
	content: "";
	display: block;
	aspect-ratio: 76/91;
	height: 100%;
	background-size: contain;
	position: absolute;
	top: 0;
}
section.archives .h1-block .about-movie-text p::before {
	right: 100%;
	background-image: url('/nhd/wp-content/themes/nhd/images/deco_line03.svg');
}
section.archives .h1-block .about-movie-text p::after {
	left: 100%;
	background-image: url('/nhd/wp-content/themes/nhd/images/deco_line04.svg');
}
section.archives .h1-block .about-movie-text p .movie-tag {
	margin-right: .5em;
	padding: .2em .5rem;
}
.interview-list-container {
	max-width: unset;
	position: relative;
}
ul.interview-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-l) var(--margin-m);
	padding: 0;
	max-width: 1140px;
	position: relative;
	z-index: 2;
	margin: auto;
}
ul.interview-list li {
	width: calc((100% - var(--margin-m)*2)/3);
}
body.home ul.interview-list li::before{
	opacity: 0;
}
body.home ul.interview-list li.bgExpand::before,
body.home ul.interview-list li.bgExpand a{
	opacity: 1;
	transition: .5s .5s;
}
body.home ul.interview-list li::after{
	background: #333;
    width: calc(100% + 85px);
    left: -60px;
}
ul.interview-list li a{
	width: 100%;
	height: 100%;
	display: block;
	color: #333 !important;
}
ul.interview-list li .text_wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
ul.interview-list li .img_wrapper {
	height: auto;
	width: 100%;
	object-fit: cover;
	overflow: hidden;
	position: relative;
	border-radius: var(--border-radius);
}

ul.interview-list li a:hover .img_wrapper::before {
	opacity: 0;
}
ul.interview-list li .faculty,
section.heading p.faculty{
	position: absolute;
	z-index: 1;
	right: var(--margin-s);
	top: var(--margin-s);
	background: var(--dept-color);
	border-radius: 50%;
	color: #fff;
	aspect-ratio: 1;
	width: 60px;
	aspect-ratio: 1;
	line-height: 1.4;
	font-size: .7rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
section.heading p.faculty {
	width: 100px;
	font-size: 1rem;
	font-weight: 600;
	& span {
		font-size: .8em;
		padding-top: .4em;
	}
	@media only screen and (max-width: 1024px) {
		right: 0;
		top: unset;
		bottom: calc(100% - 40px);
	}
	@media only screen and (max-width: 600px) {
		bottom: calc(100% + (100vw - 30px));
		right: 15px;
	}
}
ul.interview-list li img {
	object-fit: cover;
	width: 100%;
	transition: var(--transition);
	aspect-ratio: 1.3;
}
ul.interview-list a:hover img{
	transform: scale(1.2) !important;
}
ul.interview-list li .text .info {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
ul.interview-list li .text .info br {
	display: none;
}
ul.interview-list li .text .info .job + br {
	height: .5rem;
}
ul.interview-list li .text .info .faculty + br {
	height: .5rem;
}
ul.interview-list li .text p{
	margin-bottom: 0;
}
ul.interview-list li .text p.num {
	margin-bottom: auto;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(var(--bg-color));
	z-index: 0;
	width: 4rem;
	padding: 1rem 1.5rem 1rem .5rem;
	box-sizing: content-box;
	border-radius: 0 0 40px 0;
}
ul.interview-list li .text p.num::before,
ul.interview-list li .text p.num::after,
.single-interview section.article-info .title::before
{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	background-image: radial-gradient(circle at 10px 10px, transparent 10px, rgb(var(--bg-color)) 0);
}
ul.interview-list li .text p.num::before {
	left: 100%;
	top: 0;
}
ul.interview-list li .text p.num::after {
	top: 100%;
	left: 0;
}
.single-interview section.article-info .title::before {
	right: -10px;
	bottom: -.5%;
	background-image: radial-gradient(circle at 10px 10px, transparent 10px, rgb(var(--main-color)/50%) 0);
	transform: rotate(-90deg);
}

ul.interview-list li .text p.company{
	font-size: 1.2rem;
	line-height: 1.5;
}
ul.interview-list li .text .flex {
	display: flex;
	align-items: center;
	gap: 0 20px;
	flex-wrap: wrap;
}
.movie-tag {
	background: var(--sydney-global-color-1);
	color: #fff;
	padding: 0 .5rem;
	font-size: .7rem;
	line-height: 2 !important;
	border-radius: var(--border-radius);
}
.movie-tag::before {
	content: "\f008";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	display: inline-block;
	margin-right: .5em;
}
ul.interview-list .movie-tag{
	content: "";
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
}
.video-container ,
.inline-YTPlayer,
.video-container,
.mbYTP_wrapper{
	height: 100% !important;
	padding: 0 !important;
	max-width: unset !important;
	pointer-events: none;
}
.video-container iframe{
	aspect-ratio: 5/3;
	height: 140% !important;
	width: auto !important;
	max-width: unset !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%,-50%);
	margin: 0 !important;
	transition: var(--transition);
}
ul.interview-list li:hover iframe {
	transform: translate(-50%,-50%) scale(1.2);
}
.YTPOverlay {
	opacity: .2;
	background-color: rgb(51 51 51 / 50%);
	background-image: radial-gradient(#fff 25%, transparent 25%),
    radial-gradient(#fff 25%, transparent 25%);
	background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
}

section.tags-list {
  position: relative;
	margin-bottom: 0;
	padding: 0 var(--margin-s);
}
section.tags-list > .bg-wrapper {
	padding: var(--margin-l) var(--margin-m);
	max-width: 1140px;
	margin: auto;
	background: rgb(var(--bg-color));
	border-radius: var(--border-radius);
	position: relative;
}
section.tags-list > .bg-wrapper::before,
section.tags-list > .bg-wrapper::after,
.single-interview .article-info::before{
	content: "";
	display: block;
	height: auto;
	position: absolute;
}
section.tags-list > .bg-wrapper::before {
	background: url(./images/item01.svg) no-repeat top center / max(60%, 80px);
	aspect-ratio: 132/150;
	width: max(20%,140px);
	height: auto;
	top: -20px;
	left: var(--margin-m);
	@media only screen and (max-width: 600px) {
		left: -8px;
	}
}
section.tags-list > .bg-wrapper::after {
	background: url(./images/ppl08.svg) no-repeat center / contain;
	aspect-ratio: 1296/1730;
	width: max(18%,120px);
	top: -80px;
	right: var(--margin-m);
	@media only screen and (max-width: 600px) {
		right: 8px;
		
	}
}
section.tags-list h1 {
	text-align: center;
	margin-bottom: 0;
}
section.tags-list h1::before,
section.tags-list h1::after {
	content: "";
	display: block;
	position: absolute;
}
section.tags-list h1 + p{
	margin: 0 auto var(--margin-m);
	width: 100%;
	text-align: center;
	font-weight: 900;
	@media only screen and (max-width: 600px) {
		margin-bottom: 80px;
	}
}
section.tags-list h2 {
	margin: 0 !important;
	position: relative;
	display: inline-block;
}
section.tags-list .feature-box{
	width: 100%;
	justify-content: center;
	padding: 100px 0 var(--margin-m);
	& .feature {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 40px;
		border-radius: var(--border-radius);
		background: var(--dept-color) !important;
		&::before {
			content: "";
			display: block;
			width: 60%;
			height: auto;
			aspect-ratio: 657/525;
			background: #ccc;
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%,-88%);
		}
		&.dept-lifestyle::before {
			background: url(./images/feature01.png) no-repeat bottom center / cover;
		}
		&.dept-nutrition::before {
			background: url(./images/feature02.png) no-repeat bottom center / cover;
		}
		&.dept-children::before {
			background: url(./images/feature03.png) no-repeat bottom center / cover;
		}
	}
	& .bg-wrapper {
		padding: 40px 30px 30px;
		margin: 0;
		aspect-ratio: 1;
		&:hover {
			opacity: .5;
		}
		& .title {
			width: 100%;
			height: 100%;
			justify-content: center;
			align-items: flex-end;
			gap: 0;
			& .sub::after{
				content: ":::::::::::::::::";
				display: block;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				font-size: .7em;
			}
		}
	}
	& svg:has(textPath) {
		position: absolute;
		top: 40px;
		left: 0;
		& text {
			font-size: 1.4rem;
			fill: #fff;
			letter-spacing: 5px;
		}
	}
	& p:last-child {
		line-height: 1.5;
	}
	& >div {
		position: relative;
	}
}
section.tags-list .cat-box {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--margin-l);
	position: relative;
}
section.tags-list .cat-box .inner-cont {
	margin: 0 auto;
}
section.tags-list .inner-cont {
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: var(--margin-m);
	position: relative;
	container: faculty-zone / inline-size;
}
section.tags-list .inner-cont a:hover {
	opacity: .7;
}
section.tags-list .inner-cont img {
	border-radius: var(--border-radius);
}
section.tags-list .cat-box .red {
	color: rgb(var(--bg-dark-color));
	font-size: 1.2rem;
}
section.tags-list .cat-box .inner-cont.faculty {
	& .wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--margin-s);
		@container faculty-zone (max-width: 800px) {
			gap: var(--margin-m) var(--margin-s);
			flex-direction: row;
		}
		@container faculty-zone (max-width: 600px) {
			flex-direction: column;
		}
	}
	& .flex {
		display: flex;
		gap: var(--margin-s) var(--margin-m);
		@container faculty-zone (max-width: 800px) {
			flex-direction: column;
			flex: 1;
		}
		& .parent {
			& li {
				& a {
					display: block;
					text-align: center;
					writing-mode: vertical-rl;
					padding: 0 .2em;
					min-height: 140px;
					letter-spacing: .2em;
					&::before {
						text-orientation: upright;
						margin-bottom: 0.2em;
					}
					@container faculty-zone (max-width: 800px) {
						writing-mode: unset;
						min-height: unset;
						padding: 0 1em;
					}
				}
			}
		}
		& .child {
			flex: 1;
			align-items: flex-end;
			@container faculty-zone (max-width: 800px) {
				flex-direction: column;
				align-items: center;
				margin-left: 8px;
				padding-left: 16px;
				border-left: thin solid rgb(var(--bg-dark-color));
			}
			& li {
				flex: 1;
				position: relative;
				@container faculty-zone (max-width: 800px) {
					width: 100%;
				}
				& a {
					width: 100%;
					padding-top: 1em;
					padding-bottom: 1em;
					text-align: center;
					margin-top: auto;
					display: block;
					@container faculty-zone (max-width: 800px) {
						height: 100%;
						text-align: left;
					}
				}
				&::before {
					content: "";
					display: block;
					width: auto;
					height: calc(140px - 4.1em + 1em);
					aspect-ratio: 657/525;
					background: #ccc;
					position: absolute;
					left: 50%;
					bottom: 90%;
					transform: translateX(-50%);
					@container faculty-zone (max-width: 800px) {
						bottom: 0;
						right: 0;
						left: unset;
						transform: unset;
						height: auto;
						width: 80px;
					}
				}
				&.dept-lifestyle::before {
					background: url(./images/feature01.png) no-repeat bottom center / cover;
				}
				&.dept-nutrition::before {
					background: url(./images/feature02.png) no-repeat bottom center / cover;
				}
				&.dept-children::before {
					background: url(./images/feature03.png) no-repeat bottom center / cover;
				}
				&.dept-yo::before {
					background: url(./images/feature06.png) no-repeat bottom center / cover;
				}
				&.dept-shoku::before {
					background: url(./images/feature05.png) no-repeat bottom center / cover;
				}
				&.dept-sogo::before {
					background: url(./images/feature04.png) no-repeat bottom center / cover;
				}
			}
		}
	}
}
section.tags-list .cat-box .inner-cont svg {
  height: 2.4rem;
}

/* single-interview */
.single .hentry {
	margin-bottom: 0;
}
.single-interview #page {
	overflow:hidden;
}
.single-interview .page-wrap {
	padding-top: 40px;
	padding-bottom: 0 !important;
}
.single-interview .entry-header {
	display: none;
}
.single-interview .heading h1,
.single-interview h2 {
	line-height: 1.5em;
	font-family: Zen Kaku Gothic Antique,sans-serif;
}
.single-interview .heading .left-line {
	font-family: Montserrat,sans-serif;
	font-weight: 800;
}
.single-interview .heading h1 {
	font-size: 2.2rem !important;
	font-weight: 900 !important;
	display: flex;
	gap: 40px;
	line-height: 1.6;
	margin: 0 !important;
	position: relative;
	@media only screen and (max-width: 768px) {
		font-size: max(1.5rem,4vw) !important;
	}
}
.single-interview h2 {
	font-weight: 700 !important;
}
.single-interview h2 {
    font-size: 1.5rem !important;
    padding: .5em 0;
    margin-bottom: 1em !important;
	margin-top: 0 !important;
}
.single-interview h2 span {
	color: var(--sydney-global-color-1);
}
.single-interview section.heading,
.single-interview section.article,
.single-interview section.article-info {
	max-width: min(960px,80vw);
	margin: auto;
	@media only screen and (max-width: 600px) {
		max-width: unset;
	}
}
.single-interview #article .bg-wrapper {
	position: relative;
	padding-bottom: max(200px, 16vw);
	&::before,&::after {
		content: "";
		display: block;
		position: absolute;
		bottom: calc(100vw * 214 / 1284);
		left: 0;
		z-index: -1;
		width: 100vw;
		height: calc(100% + 140px);
		margin: 0 calc(50% - 50vw);
		background: rgb(var(--bg-color));
	}
	&::after {
    bottom: 0;
    width: 100vw;
    height: auto;
    aspect-ratio: 1284 / 214;
    background: url(./images/separater.svg) no-repeat bottom center / cover;
	}
}
.single-interview section.heading {
	position: relative;
	width: 100%;
	margin: 0 auto 80px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.single-interview section.heading .num-tag {
	display: flex;
	flex-direction:column;
	align-items: center;
	height: auto;
	position: absolute;
	top: 0;
	left: 1em;
}
.single-interview section.heading .num-tag .num,
.single-interview section.heading .num-tag .job {
	display: flex; 
	align-items: center;
	justify-content: center;
}
.single-interview section.heading .num-tag .num {
	background: #333;
	color: #fff;
	aspect-ratio: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: .9em;
}
.single-interview section.heading .num-tag .job {
	height: auto;
	border: 1px solid #333;
	margin: 0;
	padding: 1em .2em;
	writing-mode: vertical-rl;
	letter-spacing: .18em;
}
.single-interview section.heading .text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--margin-s);
	position: relative;
}
.single-interview section.heading .text p {
	margin-bottom: 0;
}
.single-interview section.heading .text .info {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	font-size: 1.5rem;
	gap: 8px 1em;
	margin-top: var(--margin-s);
	@media only screen and (max-width: 600px) {
		margin-top: 0;
		font-size: 1rem;
		flex-direction: column;
		align-items: flex-start;
	}
	& div {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		align-items: center;
	}
}
.single-interview section.heading .mv{
	width: 100%;
	position: relative;
}
.single-interview section.heading.no-movie .mv::after {
	display: none;
}
.single-interview section.heading .mv img {
	aspect-ratio: 16/9;
	height: auto;
	width: 100%;
	object-fit: cover;
	border-radius: var(--border-radius);
}
.single-interview section.heading .infos {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: 1.5rem;
	padding: 40px;
	background: rgb(var(--bg-dark-color)/10%);
	border-radius: var(--border-radius);
}
.single-interview section.heading .infos .infos-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.single-interview section.heading .infos figure {
	width: 120px;
	height: 120px;
	border-radius: 100%;
	overflow: hidden;
	margin: 0;
	flex-shrink: 0;
}
.single-interview section.heading .infos figure img {
	object-fit: cover;
}
.single-interview section.heading .info01 {
	display: flex;
	flex-direction: column;
}
.single-interview section.heading .info01 .dept {
	font-size: .8em;
	font-weight: normal;
	padding-left: 1em;
}
.single-interview section.heading .info02 {
	display: flex;
	gap: 1em;
}
.single-interview section.heading .info01 p,
.single-interview section.heading .info02 p{
	margin-bottom: 0;
}
.single-interview section.heading .info01 .wrapper {
	display: flex;
	gap: 1em;
	justify-content: flex-start;
	align-items: center;
}
.single-interview section.heading .infos p.job{
	background: #fff;
	color: rgb(var(--bg-dark-color));
	border: 1px solid rgb(var(--bg-dark-color));
	border-radius: 40px;
	padding: 0 .6em;
	display: inline;
}
.single-interview section.heading .info01 .wrapper > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: center;
}
.single-interview section.heading .infos i.fa {
	margin-left: 0;
}
.single-interview section.heading .infos a.external-link {
	aspect-ratio: 1;
	border: none;
}
.single-interview section.heading .infos a.external-link:hover {
	background: rgb(var(--main-color)) !important;
}
.single-interview section.heading .list-tags {
	align-items: center;
	flex: 1;
	z-index: 1;
}
.single-interview section.heading .list-tags a{
	background: rgb(var(--bg-dark-color));
}
.single-interview section.heading .list-tags .faculty a {
	background: var(--dept-color);
	@media only screen and (max-width: 600px) {
		--dept-color: rgb(var(--bg-dark-color));
		color: #333 !important;
		&::before {
			color: rgb(var(--main-color));
		}
		&:hover {
			color: #fff !important;
		}
	}
}
.single-interview section.heading .list-tags .faculty a:hover {
	background: rgb(var(--main-color));
}
.single-interview section.heading .list-tags .faculty a::before{
	transition: var(--transition);
}
.single-interview section.heading .list-tags a:hover{
	background: rgb(var(--main-color)) !important;
}
.single-interview section.heading .list-tags a:hover::before{
	color:#fff;
	opacity: 1;
}
.single-interview section.heading p.new-dept {
	font-size: .7em;
	font-weight: normal;
	margin-top: 8px;
}
.single-interview section.movie-container {
	display: none;
	width: 100%;
	max-width: 800px;
	height: auto;
	aspect-ratio: 16/9;
	position: relative;
	margin: auto;
}
#wrapper_videoPlay {
	border-radius: var(--border-radius);
}
.single-interview section.movie-container::before {
	content: "";
	display: block;
	transition: .8s cubic-bezier(0.4, 0, 1, 1);
	background: #3f3f3f !important;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	border-radius: var(--border-radius);
}
.single-interview section.movie-container::after {
	content: "";
	display: block;
	height: 160px;
	aspect-ratio: 363/816;
	background-image:url('/nhd/wp-content/uploads/2025/11/people05.png');
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left: 100%;
	top: 100%;
	transform: translate(-18%,-80px);
	z-index: 4;
}
.single-interview section.movie-container p.title {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: .1rem;
	color: #fff;
	margin: 0;
}
.single-interview section.movie-container.animeOn::before {
	transform: scaleX(0);
	transform-origin: right;
}
.single-interview #wrapper_videoPlay::before,
.single-interview #wrapper_videoPlay::after{
	content: "";
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
	position: absolute;
	z-index: 1;
	background-color: rgb(51 51 51 / 50%);
	background-image: radial-gradient(#333 25%, transparent 25%),
    radial-gradient(#333 25%, transparent 25%);
	  background-size: 6px 6px;
	background-position: 0 0, 3px 3px;
}
.single-interview #wrapper_videoPlay::after {
	background: linear-gradient(to top, rgb(51 51 51 / 40%),transparent);
}
.single-interview section.movie-container a,
.single-interview section.movie-container .loading{
	position: absolute;
	z-index: 2;
	color: #fff !important;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-interview section.movie-container a {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: .9rem;
	flex-direction: column;
	padding-bottom: 120px;
	letter-spacing: .2em;
	font-size: .8rem !important;
}
.single-interview section.movie-container a::before,
.single-interview section.movie-container a::after{
	content: "";
	display: block;
	width: 100px;
	aspect-ratio: 1;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: var(--transition);
}
.single-interview section.movie-container a::before {
	border-radius: 100%;
	background: #fff;
}
.single-interview section.movie-container a::after {
	background: var(--sydney-global-color-1);
	width: 25px;
	aspect-ratio: .8/1;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	bottom: 20px;
	transform: translate(-40%,-50%);
}
.single-interview section.movie-container a:hover::before,
.single-interview section.movie-container a:hover::after{
	opacity: .8;
}
.single-interview section.movie-container a:hover::after {
	background: var(--sydney-global-color-1);
}
.single-interview section.movie-container .loading {
	transition: .8s cubic-bezier(0.4, 0, 1, 1);
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
	z-index: 4;
	border-radius: var(--border-radius);
	overflow: hidden;
}
.single-interview section.movie-container .loading::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #3f3f3f !important;
	transition: .8s cubic-bezier(0.4, 0, 1, 1);
	border-radius: var(--border-radius);
}
.single-interview section.movie-container .loading p {
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	letter-spacing: .1em;
  color: rgb(255 255 255 / 50%);
	animation: loadingAnime 1.5s infinite;
	position: absolute;
	padding: .2em 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: .8s cubic-bezier(0.4, 0, 1, 1);
}
.single-interview section.movie-container .loading.loaded {
	opacity: 0;
	transition-delay:.8s;
	z-index: -1;
}
.single-interview section.movie-container .loading.loaded::before
{
	transform: scale(0);
}
.single-interview section.movie-container .loading.loaded p {
	opacity: 0;
}
.single-interview section.movie-container iframe {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
	margin: 0 !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
}
.single-interview section.movie-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgb(0 0 0 / 75%);
	z-index: 5;
	overflow-y:scroll;
	overscroll-behavior-y: contain;
	display: none;
}
.single-interview section.movie-modal .wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 800px;
	height: calc(100% + 1px);
	box-sizing: border-box;
}
.single-interview section.movie-modal iframe {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16/9;
	margin: 0 !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);	
}
.single-interview section.movie-modal .fitVids-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto !important;
	width: 100%;
}
.single-interview section.movie-modal .YTPOverlay {
	display: none;
}
.single-interview section.movie-modal .close-btn {
	display: inline-block;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	transition: var(--transition);
}
.single-interview section.movie-modal .close-btn:hover {
	opacity: .5;
}
.single-interview section.movie-modal .close-btn::before,
.single-interview section.movie-modal .close-btn::after{
	content: "";
	width: 100%;
	height: 2px;
	display: block;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
}
.single-interview section.movie-modal .close-btn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.single-interview section.article {
	max-width: 600px;
	display: flex;
	flex-direction: column;
	gap: var(--margin-l);
	padding-top: 80px;
	position: relative;
	& figure,& p {
		margin: 0;
	}
}
.single-interview section.article figure{
	position: relative;
	& > .deco {
		width: 100vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 calc(50% - 50vw);
		& svg {
			position: absolute;
			z-index: -1;
		}
		& svg.x-small {
			left: calc((100% - 600px)/4);
			top: -50%;
			width: 8%;
			transform: translateX(-50%);
		}
		& svg.medium {
			width: 20%;
			bottom: 0;
			left: 0;
			transform: translateX(-50%);
		}
		& svg.large {
			width: 28%;
			top: 0;
			right: 0;
			transform: translateX(50%) scale(-1,1);
		}
		& svg.small {
			right: calc((100% - 600px)/4);
			top: 150%;
			transform: translateX(50%);
		}
	}
	& > figure {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		& span {
			display: block;
			height: auto;
			position: absolute;
		}
		& .dec {
			width: 120px;
			background: url(./images/deco04.svg) no-repeat center / contain;
			aspect-ratio: 379/165;
			left: 100%;
			top: var(--margin-m);
			transform: translateX(-20%);
			@media only screen and (max-width: 1023px) {
				figure:first-of-type & {
					transform: unset;
					left: unset;
					right: -20px;
					top: -40px;
					@media only screen and (max-width: 600px) {
						width: 100px;
						right: -8px;
						top: -30px;
					}
				}
			}
			figure:nth-of-type(2) & {
				width: 100px;
				background-image: url(./images/deco06.svg);
				aspect-ratio: 419/760;
				left: 0%;
				transform: translateX(-80%);
				@media only screen and (max-width: 1023px) {
					transform: translateX(-50%);
					top: -40px;
				}
				@media only screen and (max-width: 600px) {
					width: 80px;
					transform: unset;
					left: -15px;
				}
			}
			figure:nth-of-type(3) & {
				width: 140px;
				background-image: url(./images/item04.svg);
				aspect-ratio: 847/317;
				left: 100%;
				top: var(--margin-s);
				transform: translateX(-30%);
				@media only screen and (max-width: 1023px) {
					transform: unset;
					top: -40px;
					left: unset;
					right: -8px;
				}
				@media only screen and (max-width: 600px) {
					width: 100px;
					top: -30px;
				}
			}
		}
		& .ppl {
			height: 180px;
			background: url(./images/ppl03.svg) no-repeat center / contain;
			aspect-ratio: 639/778;
			bottom: var(--margin-l);
			left: 0;
			transform: translateX(-50%);
			@media only screen and (max-width: 1023px) {
				figure:first-of-type & {
					transform: unset;
					left: -8px;
					bottom: -40px;
					width: max(18vw,100px);
				}
			}
			figure:nth-of-type(2) & {
				height: 280px;
				background-image: url(./images/ppl04.svg);
				aspect-ratio: 98/150;
				left: 100%;
				top: 100%;
				transform: translate(-15%,-100%);
				@media only screen and (max-width: 1023px) {
					left: unset;
					right: 0;
					top: unset;
					bottom: -40px;
					transform: translateX(30%);
					width: max(18vw,100px);
				}
			}
			figure:nth-of-type(3) & {
				height: 280px;
				background-image: url(./images/ppl05.svg);
				aspect-ratio: 142/150;
				left: 0;
				top: 100%;
				transform: translate(-50%,-90%);
				@media only screen and (max-width: 1023px) {
					top: unset;
					bottom: -40px;
					transform: translateX(-26%);
					width: max(18vw,100px);
				}
				@media only screen and (max-width: 600px) {
					width: max(33vw,100px);
				}
			}
			@media only screen and (max-width: 1023px) {
				height: auto !important;
			}
		}
	}
}
.single-interview section.article.no-movie {
	padding-top: 0;
}
.single-interview section.article-info {
	max-width: 600px;
	background: #fff;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	margin: 80px auto 0;
	padding: var(--margin-s) var(--margin-m);
	&::before {
		content: "";
		display: block;
		width: 120px;
		height: auto;
		aspect-ratio: 678/366;
		background: url(./images/item02.svg) no-repeat center / contain;
		position: absolute;
		bottom: calc(100% - 2rem);
		right: calc(100% - 1rem);
		@media only screen and (max-width: 1023px) {
			display: none;
		}
	}
	@media only screen and (max-width: 600px) {
		padding: var(--margin-m);
	}
}
.single-interview aside.other-articles {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 80px;
	position: relative;
	@media only screen and (max-width: 600px) {
		padding-top: 40px;
	}
}
.single-interview aside.other-articles h1 + p{
	text-align: center;
	font-weight: 900;
}
.single-interview aside.other-articles h1 {
	padding: 0;
	justify-content: center;
	margin: 0 auto !important;
	line-height: 1.6;
	text-align: center;
	position: relative;
	max-width: 1140px;
	z-index: 1;
}
.single-interview #slider{
	position: relative;
	padding: 0;
	gap: 0;
  max-width: 1140px;
	margin-top: 80px;
}
.single-interview #slider li {
	margin: 0 20px;
	top: 0;
}
.single-interview #slider li::before {
	border: none;
}
.single-interview #slider .slick-arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	width: 3rem !important;
	height: auto !important;
	aspect-ratio: 1;
	overflow: hidden;
	display: block;
	padding: 0;
	display: none;
	background: none;
	border: none;
}
.single-interview #slider .slick-arrow::before{
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: #333;
	font-size: 3rem;
	width: 100%;
	aspect-ratio: 1;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,calc(-50% + .75rem));
	transition: var(--transition);
}
.single-interview #slider .slick-arrow:hover {
	color: transparent;
	&::before {
		color: rgb(var(--main-color));
	}
}
.single-interview #slider .slick-next {
	right: -55px;
}
.single-interview #slider .slick-prev {
	left: -55px;
}
.single-interview #slider .slick-prev::before {
	transform: translate(-50%,calc(-50% + .75rem)) scaleX(-1);
}

.single-interview section.article .margin-caption {
	margin-bottom: 2em !important;
}
.single-interview section.article .txt{
	width: 100%;
	margin: auto;
	position: relative;
}
.single-interview section.article figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
  opacity: 0;
	border-radius: var(--border-radius);
}
.single-interview section.article figure.animeOn img {
	opacity: 1;
	transition: .5s;
}
.single-interview section.article figcaption {
	padding: 1em 2em;
	line-height: 1.8em;
	font-size: .8em;
	width: 100%;
	text-align: center;
}
.single-interview ul.list-links {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	@media only screen and (max-width: 600px) {
		gap: 1em;
	}
}
.single-interview ul.list-links li {
	position: relative;
}
.single-interview ul.list-links li span {
	flex: 0 0 110px;
	@media only screen and (max-width: 600px) {
		flex: 0 0 auto;
	}
}
.single-interview ul.list-links a {
	line-height: 1.6;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}
.single-interview ul.list-links li a:hover {
	color: rgb(var(--main-color))!important;
}
.single-interview ul.list-links li {
	display: flex;
	gap: 0 1em;
	align-items: flex-start;
	@media only screen and (max-width: 600px) {
		flex-direction: column;
	}
}
.single-interview #cat-check {
	margin-bottom: 0;
}
.single-interview section.article h2 {
	padding: var(--margin-s);
	background: #fff;
	border-radius: .5rem;
	display: flex;
	gap: var(--margin-s);
	position: relative;
	&::before {
		content: "";
		display: block;
		width: .5em;
		align-self: stretch;
		background: var(--dept-color);
	}
}

/* page-archives*/
body.archive .page-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--margin-l);
	position: relative;
	z-index: 1;
	min-height: min(200px,16vw);
}
body.archive .page-header h1 {
	line-height: 1.6;
}
body.archive .page-header h1,
body.archive .page-header p{
	margin: 0;
}
body.archive ul.interview-list {
	max-width: unset;
	margin-left: 0;
}

/* common */
.tag {
	background: var(--dept-color,#333);
	color: #fff;
	padding: 0 .5em;
	border-radius: .5em;
	body.archive .page-header &{
		margin-right: 1em;
	}
}
.left-line {
	border-left: 6px solid var(--dept-color,rgb(var(--main-color)));
	padding-left: 10px;
	line-height: 1.4;
	font-size: 1.25rem;
	margin: 0;
}
.no-shrink {
	flex-shrink: 0;
}
.icon-arrow {
  display: block;
  width: 40px;
  height: 40px;
  background: rgb(var(--bg-dark-color));
  border-radius: 100%;
	transition: .2s;
}
.icon-arrow::after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	mask-image: url('/nhd/wp-content/themes/nhd/images/icon_arrow.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-image: url('/nhd/wp-content/themes/nhd/images/icon_arrow.svg');
	-webkit-mask-image: url('/nhd/wp-content/themes/nhd/images/icon_arrow.svg');
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-image: url('/nhd/wp-content/themes/nhd/images/icon_arrow.svg');
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	transition: .2s;
}
li:hover .icon-arrow {
	background: rgb(var(--main-color));
}
li:hover .icon-arrow::after{
	background: #fff;
}
span.red {
	color: var(--sydney-global-color-1);
	padding: 0 .2em;
}
.site-branding > a {
	display: block;
	&::after {
		/*content: "泉輩STORY";*/
		font-size: calc(721/132*40px/6.8);
		font-weight: 900;
		font-family: Montserrat;
		line-height: 1;
		letter-spacing: .2em;
		display: block;
		width: 100%;
		background: linear-gradient(to right, #2c6eac 2.2em, #48ae82 2.2em);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		margin: .8rem 0 0 0;
	}
	& img {
		height: 40px !important;
		object-fit: contain;
		@media only screen and (max-width: 600px) {
			height: 36px !important;
		}
	}
}
.wp-block-buttons,
.wp-block-spacer{
	margin-bottom: 0;
}
.movie-play-button {
	display: block;
}
.movie-play-button a{
	aspect-ratio: 1;
	width: 80px !important;
	height: auto;
	border: none;
	text-indent: 999%;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	background: #fff;
}
.movie-play-button a::before {
	content: "";
	display: block;
	aspect-ratio: cos(30deg);
	width: 30%;
	background: var(--sydney-global-color-1);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-40%, -50%);
	clip-path: polygon(0 0,100% 50%,0 100%);
}
a.external-link {
	border: 1px solid #333;
	background: rgb(var(--bg-dark-color));
	color: #fff !important;
	font-size: .7em;
	padding: .2em .7em;
	border-radius: 30px;
	display: inline-block;
	vertical-align: text-top;
}
a.external-link:hover {
	border: 1px solid var(--sydney-global-color-1);
	background: var(--sydney-global-color-1) !important;
}
ul.list-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1em;
	padding-left: 0;
	margin: 0;
	@media only screen and (max-width: 600px) {
		gap: 8px;
	}
}
ul.list-tags li a {
	display: inline-block;
	padding: 0 1em;
	line-height: 2.1;
	border-radius: 40px;
	color: #333 !important;
	background: var(--dept-color,rgb(var(--bg-dark-color)));
	li.faculty & {
		color: #fff !important;
	}
	@media only screen and (max-width: 600px) {
		font-size: .85em;
	}
}
ul.list-tags li a::before,
span.tags::before{
	content: "#";
	margin-right: .3em;
	color: rgb(var(--sharp-color,var(--main-color)));
	transition: var(--transition);
}
body.single ul.list-tags li a::before{
	color: rgb(var(--main-color));
}
body.single ul.list-tags li.faculty a::before{
	color: rgb(var(--bg-color));
}
ul.list-tags li a:hover {
	background: rgb(var(--main-color));
	color: #fff !important;
	opacity: 1 !important;
	&::before {
		color: #fff !important;
	}
}
span.tags {
	margin-right: .5em;
}
nav.interview-post-nav {
	padding: 100px 0 0;
	margin: auto;
}
nav.interview-post-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}
nav.interview-post-nav a > p {
	font-weight: 700;
}
nav.interview-post-nav .list a {
	flex-direction: column;
	gap: 1em;
	padding: 3em 1em;
	background: rgb(255,255,255,.1);
}
nav.interview-post-nav p {
	margin: 0;
}
nav.interview-post-nav p,
nav.interview-post-nav a{
	color: #fff;
	transition: var(--transition);
}
nav.interview-post-nav a:hover p,
nav.interview-post-nav a:hover{
	color: #333;
}
nav.interview-post-nav .bg-wrapper {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 1em;
	position: relative;
	padding: 40px 0;
}
nav.interview-post-nav .bg-wrapper div {
	text-align: center;
}
nav.interview-post-nav img {
  width: 100%;
	max-width: 240px;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
	transition: var(--transition);
}
nav.interview-post-nav a:hover img {
	transform: scale(1.2);
}
nav.interview-post-nav .prev figure {
	position: relative;
}
nav.interview-post-nav i {
	font-size: 1em;
	vertical-align: middle;
}
nav.interview-post-nav .prev i {
	margin: 0 .5em 0 0;
}
nav.interview-post-nav .prev,
nav.interview-post-nav .next {
	display: flex;
	justify-content: center;
	gap: 1em;
	width: 300px;
}
nav.interview-post-nav .list {
	display: flex;
	align-items: center;
}
nav.interview-post-nav .list figure{
	width: 40%;
	margin: auto;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	gap: .67em;
}
	nav.interview-post-nav .list figure {
		margin: 0;
	}
nav.interview-post-nav figure {
	overflow: hidden;
}
nav.interview-post-nav figure span {
	width: 100%;
	height: .5px;
	background: #fff;
	display: block;
	transition: var(--transition);
}
nav.interview-post-nav a:hover figure span {
	background: var(--sydney-global-color-3);
}
nav.interview-post-nav a:hover p{
	color: var(--sydney-global-color-3);
}
nav.interview-post-nav a:hover {
	color: var(--sydney-global-color-3);
}
nav.interview-post-nav a p:first-child,
nav.interview-post-nav div.list{
	font-weight: 700;
}
nav.interview-post-nav p.company {
	font-size: .8em;
	max-width: 240px;
	margin: auto
}
.nav-links {
	margin: 100px 0 0;
	display: flex;
	justify-content: center;
	gap: .5em;
}
figcaption {
	font-size: .9em;
}
nav.interview-post-nav .bg-wrapper::before,
nav.interview-post-nav .bg-wrapper::after{
    content: "";
    width: 100vw;
    height: 100%;
    margin: 0 calc(50% - 50vw);
    display: block;
    background: rgb(0 0 0 / 60%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* footer */
#colophon {
	&::before,&::after {
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		z-index: -1;
	}
	&::before {
		height: auto;
	    aspect-ratio: 1283 / 103;
	    background: url(./images/colophon-bg.svg) no-repeat bottom center / cover;
		bottom: 0;
		@media only screen and (max-width: 600px) {
			height: 100px;
		}
	}
	& .container {
		@media only screen and (max-width: 600px) {
			margin-bottom: 40px;
		}
	}
	& .deco {
		width: 100%;
		max-width: 1280px;
		height: 200px;
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
		display: flex;
		justify-content: space-between;
		gap: 40%;
		@media only screen and (max-width: 600px) {
			gap: 8%;
			bottom: 6px;
			padding: 0 8px;
		}
		& figure {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			gap: 20px;
			@media only screen and (max-width: 600px) {
				gap: 0;
			}
				& span {
					flex: 1;
					height: 170px;
					display: block;
					background: #ccc;
					position: relative;
					@media only screen and (max-width: 600px) {
						height: 82px;
					}
				}
				&.left {
					& span:first-child {
						background: url(./images/ppl09.svg) no-repeat bottom center / contain;
					}
					& span:last-child {
						background: url(./images/ppl10.svg) no-repeat bottom center / contain;
						bottom: 20px;
					}
				}
				&.right {
					& span:first-child {
						background: url(./images/ppl11.svg) no-repeat bottom center / contain;
						height: 220px;
						@media only screen and (max-width: 600px) {
							height: 110px;
						}
					}
					& span:last-child {
						background: url(./images/ppl12.svg) no-repeat bottom center / contain;
						bottom: 40px;
						@media only screen and (max-width: 600px) {
							bottom: 28px;
						}
					}
				}
			}
		}
}
.sydney-credits {
	font-size: .7em;
	text-align: center;
}
.sydney-credits::before {
	content: "";
	aspect-ratio: 232/40;
  	height: 50px;
	display: block;
	margin: 0 auto 1rem;
	background: url("/gakusen/wp-content/uploads/2026/04/logo_gakusen.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/* DECO */
header.shfb {
	z-index: 1;
	body.single & {
		z-index: 0;
	}
	&::before,&::after {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
	}
	&::before {
		width: 416px;
		height: auto;
		aspect-ratio: 416/176;
		left: 0;
		top: 0;
		background: url(./images/blob-header.svg) no-repeat center / contain;
		@media only screen and (max-width: 1024px) {
			width: 340px;
		}
		@media only screen and (max-width: 600px) {
			width: 280px;
		}
	}
	&::after {
		width: 110px;
		height: auto;
		aspect-ratio: 116 / 103;
		left: calc(416px + 11vw);
		top: var(--margin-s);
		background: url(./images/blob-main.svg) no-repeat center / contain;
		@media only screen and (max-width: 1024px) {
			top: -20px;
			left: calc(340px + 4vw);
			width: 80px;
		}
		@media only screen and (max-width: 600px) {
			display: none;
		}
	}
	body.home &::after {
		display: none;
	}
	:is(body.home,body.archive) & {
		&::before {
			mask: url(./images/blob-header.svg) no-repeat center / contain;
			-webkit-mask: url(./images/blob-header.svg) no-repeat center / contain;
			background: rgb(var(--bg-color));
		}
	}
}
.deco {
	pointer-events: none;
	figure {
		margin: 0;
	}
}
svg.blob {
  display: inline-block;
	height: auto;
	aspect-ratio: 116 / 103;
	color: #fff;
  & use {
    width: 100%;
    height: 100%;
  }
	&.x-small {
		width: 58px;
	}
	&.small {
		width: 110px;
	}
	&.medium {
		width: 24vw;
		transform: rotate(-80deg);
	}
	&.large {
		width: 36vw;
		transform: rotate(-160deg);
	}
}
.front-mv-box .deco{
	position: absolute;
	z-index: 1;
	top: -100px;
	left: 0;
	width: 100vw;
	height: 100lvh;
	display: block;
	& figure {
		width: 100%;
		height: 100%;
		position: absolute;
		& > * {
			position: absolute;
		}
	}
	& figure.blob {
		z-index: -1;
		& .small {
			width: 5vw;
			top: 28%;
			left: 20%;
		}
		& .medium {
			bottom: 8%;
			left: -6%;
		}
		& .large {
			bottom: 25%;
			right: -21%;
		}
	}
	& figure.ppl {
		& img {
			height: max(22vw,100px);
			max-height: 40lvh;
		}
		& img[src*="ppl01"] {
			height: max(36vw,200px);
			max-height: 60lvh;
			bottom: 5lvh;
			left: 58%;
			transform: translateX(-50%);
		}
		& img[src*="ppl02"] {
			top: 0;
			left: 300px;
			transform: rotate(-14deg);
		}
		& img[src*="ppl03"] {
			left: var(--margin-m);
			top: 100%;
			transform: translateY(-65%);
		}
		& img[src*="ppl04"] {
			height: max(26vw,200px);
			top: var(--margin-m);
			right: 4vw;
		}
	}
	& figure.items {
		& img[src*="item02"] {
			width: 140px;
			top: 90px;
			left: 110px;
			transform: rotate(-8deg);
		}
		& img[src*="item03"] {
			width: max(13vw,100px);
			bottom: var(--margin-s);
			left: 23%;
		}
		& img[src*="item05"] {
			width: 6vw;
			top: 68px;
			left: 60%;
		}
		& .photo {
			width: 24vw;
			aspect-ratio: 5/3;
			background: url(./images/photo01.jpg) no-repeat center / cover;
			right: 0;
			bottom: var(--margin-m);
			border-radius: var(--border-radius) 0 0 var(--border-radius);
			& img {
				position: absolute;
				&[src*="item01"] {
					width: 35%;
					bottom: 0;
					right: 100%;
					transform: translate(20%,40%);
				}
				&[src*="item06"] {
					width: 40%;
					bottom: 100%;
					right: var(--margin-s);
					transform: translateY(14%);
				}
			}
		}
	}
	& figure.decos {
		z-index: -1;
		& img {
			width: 100px;
		}
		& img[src*="deco03"] {
			width: 18vw;
			right: 20%;
			top: 0;
			transform: translateY(-35%) rotate(-32deg);
		}
		& img[src*="deco04"] {
			width: 10vw;
			right: var(--margin-m);
			top: var(--margin-s);
		}
		& img[src*="deco07"] {
			width: min(5vw,60px);
			top: var(--margin-s);
			left: 36%;
		}
		& img[src*="deco08"] {
			width: 7vw;
			top: min(12svh,110px);
			left: 0;
			transform: rotate(-20deg);
		}
		& img[src*="deco09"] {
			width: 70px;
			top: var(--margin-l);
			left: 50%;
		}
		& img[src*="deco10"] {
			width: 60px;
			bottom: 8vw;
			left: 35%;
		}
		& img[src*="deco11"] {
			width: 4vw;
			top: 100%;
			left: 0;
			transform: translateX(-40%);
			@media only screen and (min-width: 1500px) {
				top: 60%;
			}
		}
	}
}
.feature-box .deco {
	display: none;
	position: absolute;
	bottom: calc(100% + 70px);
	left: 10px;
	& svg:first-child {
		width: 90px;
		transform: translateX(60px);
	}
	& svg:last-child {
		transform: rotate(130deg);
	}
}
.interview-list-container .deco {
	position: absolute;
	z-index: -1;
	bottom: calc(100% + var(--margin-m));
	left: 0;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 0 var(--margin-m);
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	@media only screen and (max-width: 1279px) {
		padding: 0 15px;
	}
	@media only screen and (max-width: 600px) {
		padding: 0 8px;
		z-index: 2;
	}
	& svg {
		position: absolute;
		color: rgb(var(--bg-color));
		body.single &{
			right: 20px;
			top: 0px;
		}
		&.x-small:first-of-type {
			right: var(--margin-m);
			top: calc(-1.5*var(--margin-m));
			body.home &{
				display: none;
			}
			body.single & {
				color: #fff;
				right: unset;
				left: var(--margin-l);
				@media only screen and (max-width: 1024px) {
					top: unset;
					bottom: 100%;
					left: 19vw;
					transform: translateY(-50%);
				}
				@media only screen and (max-width: 820px) {
					transform: translateY(-100%);
					width: 10vw;
				}
			}
		}
		&.x-small:nth-of-type(2) {
			left: calc(min(300px,20vw) + 12%);
			top: 30%;
			:is(body.home,body.archive) &{
				display: none;
			}
		}
		&.small {
			bottom: 0;
			right: calc(min(300px,20vw) + 1%);
			transform: rotate(-70deg);
			body.home &{
				right: calc(min(300px,20vw) + 4%);
				@media only screen and (max-width: 600px) {
					transform: translate(40%,10%);
				}
			}
		}
	}
	& figure {
		display: flex;
		align-items: center;
		@media only screen and (max-width: 600px) {
			align-items: flex-end;
		}
		&:first-of-type {
			transform: rotate(70deg) scale(.9) translateY(-8%);
			body.single & {
				transform: translate(30%, calc(var(--margin-m)*-1.5));
				@media only screen and (max-width: 1279px) {
					transform: translate(0%, calc(var(--margin-m)*-1.5));
				}
				@media only screen and (max-width: 768px) {
					transform: translate(0%, calc(var(--margin-m)*-2));
				}
			}
			@media only screen and (max-width: 600px) {
				transform: translate(20%,52%) rotate(60deg) !important;
			}
		}
		&:last-of-type {
			transform: scale(-1,1);
			body.single & {
				transform: translateY(calc(var(--margin-m)*-1));
				@media only screen and (max-width: 768px) {
					transform: translate(0%, calc(var(--margin-m)*-2));
				}
			}
			@media only screen and (max-width: 600px) {
				transform: scale(-1,1) translateY(-%) !important;
			}
		}
		& img {
			height: min(300px,20vw);
			body.single figure:first-of-type & {
				height: min(200px,20vw);
				@media only screen and (max-width: 1279px) {
					height: max(120px,18vw);
				}
				@media only screen and (max-width: 768px) {
					height: max(80px,20vw);
				}
			}
			body.single figure:last-of-type & {
				@media only screen and (max-width: 600px) {
					height: auto;
					width: 120px;
				}
			}
			@media only screen and (max-width: 600px) {
				height: auto;
				width: 110px;
				figure:last-of-type & {
					width: 95px;
				}
			}
		}
	}
}
body.single .heading .text .deco {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: -1;
	@media only screen and (max-width: 600px) {
		z-index: 0;
	}
	& * {
		position: absolute;
	}
	& svg {
		left: 40%;
		bottom: 100%;
	}
	& figure {
		display: block;
		transform: scale(-1,1) translate(30px,28%);
		right: 0;
		bottom: 100%;
		height: min(300px,20vw);
		aspect-ratio: 1034/1147;
		&::before {
			content: "";
			display: block;
			width: 70px;
			height: auto;
			aspect-ratio: 314/303;
			background: url(./images/deco01.svg) no-repeat center / contain;
			position: absolute;
			bottom: 30%;
			left: 105%;
			transform: scale(-1,1);
		}
		@media only screen and (max-width: 1024px) {
			transform: scale(-1,1) translate(100px,10%);
			&::before {
				width: 5vw;
			}
		}
		@media only screen and (max-width: 600px) {
			top: calc(-1*(100vw - 30px + 60px + 40px));
			bottom: unset;
			width: 24vw;
			height: auto;
			left: 15px;
			transform: unset;
			&::before {
				width: 7vw;
			}
		}
	}
}
body.single .mv .deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	display: block;
	margin: 0 calc(50% - 50vw);
	& svg {
		z-index: -1;
		position: absolute;
	}
	& svg:first-of-type {
		width: 20%;
		transform: translateX(-60%);
		@media only screen and (max-width: 1279px) {
			width: 30%;
		}
	}
	& svg:last-of-type {
		width: 25%;
		right: 0;
		transform: scale(-1,1) translate(-50%,-70%) rotate(40deg);
		@media only screen and (max-width: 1279px) {
			width: 40%;
		}
	}
	& svg + figure {
		aspect-ratio: 55/160;
		width: var(--margin-l);
		position: absolute;
		top: 5%;
		right: calc((100vw - 960px)/4);
		transform: translateX(50%);
		@media only screen and (max-width: 1279px) {
			transform: unset;
			right: 5vw;
			width: 7vw;
		}
		@media only screen and (max-width: 600px) {
			right: 8px;
			width: 10vw;
			top: 15%;
		}
	}
	& img {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	& div {
		max-width: 960px;
		height: 100%;
		margin: auto;
		position: relative;
		& figure {
			position: absolute;
			&:first-of-type {
				aspect-ratio: 99/149;
				width: var(--margin-xl);
				top: 30%;
				right: 100%;
				transform: translateX(20px);
				@media only screen and (max-width: 1279px) {
					transform: unset;
					right: unset;
					left: 0;
					width: 15vw;
				}
				@media only screen and (max-width: 600px) {
					left: -15px;
					top: 40%;
				}
			}
			&:last-of-type {
				aspect-ratio: 203/211;
				height: min(300px, 20vw);
				bottom: calc(-1*var(--margin-m));
				right: calc(-1*var(--margin-l));
				transform: translateX(40px);
				@media only screen and (max-width: 1279px) {
					right: 15px;
					transform: unset;
				}
				@media only screen and (max-width: 600px) {
					right: 30px;
					bottom: -60px;
					height: min(120px, 40vw);
				}
			}
		}
	}
}
body.home section.archives .title .deco,
body.archive .page-header .deco{
	width: 100%;
	height: 100%;
	position: absolute;
	top: -120px;
	display: flex;
	justify-content: space-evenly;
	@media only screen and (max-width: 1023px) {
		padding: 0 18% 0 260px;
		justify-content: space-between;
	}
	@media only screen and (max-width: 600px) {
		padding: 0 0 0 230px;
		top: -80px;
		height: auto;
	}
		& figure:first-of-type {
			width: 120px;
			transform: translateY(-40px);
			@media only screen and (max-width: 1023px) {
				width: 100px;
			}
			@media only screen and (max-width: 600px) {
				transform: unset;
				transform: translateY(-30%);
			}
		}
		& figure:last-of-type {
			width: 140px;
			transform: translateY(20px);
			@media only screen and (max-width: 1023px) {
				width: 100px;
			}
			@media only screen and (max-width: 600px) {
				transform: translateY(80px);
			}
		}
}

/* responsive */
@container front-mv-box (min-aspect-ratio: 5 / 3) {
	.wp-block-cover__inner-container {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
}
@container front-mv-box (max-aspect-ratio: 5 / 3) {
	.wp-block-cover__inner-container {
		height: 100%;
	}
	.wp-block-cover__inner-container::before,
	.wp-block-cover__inner-container::after{
		content: "";
		width: 100%;
		height: 100%;
		display: block;
	}
	.wp-block-cover__inner-container::before {
		/*background: url('./wp-content/themes/nhd/images/img_top_main_sp.jpg');*/
		background-size: cover;
		position: relative;
		z-index: -2;
	}
	.wp-block-cover__inner-container::after {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		/*background: url('./wp-content/themes/nhd/images/mv_title2.png');*/
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
	}
}
@media only screen and (max-width: 1200px) {
	.single-interview .svg-title{
		left: 40px;
	}
	.single-interview aside.other-articles .svg-title {
		top: 80px;
	}
	.single-interview .article-sec .txt {
		flex: 1.2;
	}
	.single-interview .article-sec figure {
		min-height: 400px;
	}
	.single-interview #slider{
		width: calc(100% - 40px);
	  max-width: unset;
	}
}
@media only screen and (max-width: 1040px) {
	#masthead-mobile {
		display: none;
	}
	.header-col {
		padding-right: 0 !important;
	}
	.menu-button-content.opened {
		overflow-y: scroll;
		overscroll-behavior-y: contain;
	}
	.leading-text-box {
		padding: 80px 40px;
	}
	.leading-text-box .feature-box {
		gap: 20px;
	}
	.leading-text-box .feature-box .bg-wrapper {
		padding: 30px 20px;
	}
	body.home .entry-content::before {
		width: calc(100% - 25px);
	}
	section.archives::after {
		left: calc(1140px + ((100vw - 1140px)/2) - ((1140px - 16vw)/2) + 4rem);
		top: -60px;
	}
	section.archives .h1-block .about-movie-text>div {
		padding-right: 42px;
	}
	section.archives .h1-block .about-movie-text p {
		margin-top: 20px;
	}
	ul.interview-list li {
		width: calc((100% - var(--margin-m))/2);
	}
	.single-interview .container {
		width: 100%;
	}
	.single-interview section.heading .text {
		position: relative;
		bottom: 0;
		height: auto;
		min-height: unset;
	}
	.single-interview section.heading .text::before {
		transform: translateX(51%);
		top: 60px;
		z-index: 1;
	}
	.single-interview section.heading .mv {
		position: relative;
		top: 0;
		width: 100%;
		height: auto;
		margin: auto;
	}
	.single-interview section.heading .mv::before {
		display: none;
	}
	.single-interview section.heading .mv img {
		width: 100%;
		border-radius: var(--border-radius);
	}
	.single-interview .article-sec .txt {
		padding: 0;
	}
	.single-interview .article-sec {
		gap: 40px;
	}
	.single-interview .svg-title {
		top: 0;
	}
	/*
	.single-interview #slider .slick-list{
		padding:0 12% 0 0 !important;
	}
	*/
	.single-interview aside.other-articles h1::before,
	.single-interview aside.other-articles h1::after{
		height: 120px;
		top: -100px;
	}
	.single-interview aside.other-articles h1::before {
		left: 15px;
	}
	.single-interview aside.other-articles h1::after {
		right: 15px;
	}
}

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

	.leading-text-box .feature-box {
		justify-content: center;
	}
	.leading-text-box .feature-box .feature {
		flex-basis: unset !important;
		max-width: calc((100% - 40px)/2);
	}
	.single-interview h2 {
		padding-top: 0;
	}
	.single-interview .article-sec .txt p {
		margin-bottom: 0;
	}
	.single-interview section.movie-container {
		margin-bottom: 0;
		max-width: unset;
	}
	.single-interview section.movie-container::after {
		left: unset;
		right: 0;
		transform: translate(-40%,-60px);
	}
	.single-interview section.article {
		padding-top: 120px;
	}
	.single-interview section.article:has(.article-sec.no-img:first-child)::before {
		display: none;
	}
	.single-interview .article-sec,
	.single-interview .article-sec:nth-child(2n){
		flex-direction: column;
	}
	.single-interview section.heading .text::before {
		top: -60px;
		transform: translateX(63%);
	}
	.single-interview .article-sec figure {
		width: 100%;
		margin: auto;
		/*overflow:hidden;*/
		aspect-ratio: 16/9;
		padding: 0;
	}
	.single-interview .article-sec figure img {
		padding: 0;
        max-width: unset;
	}
	.single-interview .article-sec:nth-child(2n) figure img {
		right: 0;
	}
	.single-interview .article-sec figure {
		min-height: 320px;
	}
	.single-interview section.article-info .message .message-container {
		padding: 60px 40px;
	}
	.single-interview section.article-info .message img:first-child {
		width: 120px;
		height: 120px;
	}
	.single-interview .article-info::before {
		right: -10%;
		top: -40px;
	}
	.single-interview #slider {
		width: 100vw;
	}
	.go-top.position-right span {
		font-size: .75rem;
	}
}
@media only screen and (max-width: 600px) {
	:root {
		--border-radius-xl: 4rem;
		--border-radius: 20px;
	}
	body {
		font-size: 14px;
	}
	.site-logo {
		object-fit: contain;
	}
	header#masthead {
		height: 60px;
	}
	.container-fluid {
		padding-right: 0;
	}
	.header-col.menu-col.menu-right {
		display: none;
	}
	header .row {
		width: 100%;
	}
	header a[href$="#openmenu"] {
		width: 60px;
		height: 60px;
		font-size: 10px;
		padding-top: 2em;
		line-height: 1.8;
	}
	.site-branding {
		gap: 8px !important;
	}
	.site-description {
		font-size: .5em !important;
	}
	.front-mv-box .main-title {
		font-size: 1.6rem !important;
	}
	.menu-button-content nav li span:first-child{
		font-size: 1.5rem;
	}
	.front-mv-box {
		min-height: unset !important;
		height: 100lvh;
		max-height: 600px !important;
	}
	.front-mv-box .main-title {
		margin: 0;
		height: 100%;
		color: #000 !important;
		margin: -10px 10px 0 0 !important;
	}
	.front-mv-box .wp-block-cover__image-background {
		/*max-height: 800px !important;*/
		/*animation: 20s ease-in forwards bgMovie;*/
	}
	.leading-text-box {
		padding: 30px 20px 80px;
	}
	.leading-text-box .title-box .title {
		padding-bottom: 10px;
	}
	.leading-text-box svg {
		width: 100%;
	}
	.leading-text-box svg text {
		font-size: calc((100vw - 40px)/15) !important;
		stroke-width: 1.2;
	}
	.leading-text-box figure.youtube {
		width: calc(100% + 40px);
		margin-left: -20px !important;
	}
	.leading-text-box .inner-box {
		gap: 40px;
	}
	.leading-text-box .text-box {
		gap: 0px 40px;
		flex-wrap: wrap;
		position: relative;
		padding-top: 20px;
	}
	.leading-text-box .text-box .no-shrink {
		width: 100%;
		order: 3;
	}
	.leading-text-box .text-box figure,
	.leading-text-box .text-box figure img{
		height: 80px !important;
	}
	.leading-text-box .text-box p {
		text-align: left;
		font-size: 1em;
		padding-top: 20px;
		order: 3;
	}
	.leading-text-box .text-box p br:not(.sp) {
		display: none;
	}
	.leading-text-box .feature-box {
		flex-direction: column !important;
	}
	.leading-text-box .feature-box .feature {
		width: 100%;
		max-width: unset;
	}
	.leading-text-box .feature-box .bg-wrapper {
		aspect-ratio: unset;
		background-position: center top 42%;
		border-radius: 20px !important;
	}
	.leading-text-box .feature-box .feature .title p {
		font-size: 1rem;
	}
	.leading-text-box .feature-box svg {
		height: calc(1.8rem*1.8);
	}
	.leading-text-box .feature-box .title p:last-child,
	.leading-text-box .feature-box svg text{
		font-size: 1.8rem !important;
	}
	.leading-text-box .feature-box .movie-container .title p {
		font-size: 1.2rem !important;
	}
	.leading-text-box .feature-box svg text {
		stroke-width: calc(4/2);
	}
	.leading-text-box .text-box
	body.home section.archives {
		padding-left: 0;
		margin: auto;
		width: 100%;
	}
	section.archives::after {
		top: 20px;
		left: unset;
		right: -50%;
		width: 100vw;
		opacity: .4;
	}
	section.archives .h1-block .about-movie-text p {
		margin-top: 0;
	}
	ul.interview-list {
		padding: 0;
	}
	section.archives::before {
		transform: translateY(10%);
	}
	section.archives h1 {
		text-align: center;
	}
	section.archives .h1-block .about-movie-text>div {
		padding: 0;
		justify-content: center;
	}
	section.archives .h1-block > .wp-block-group__inner-container {
		flex-direction: column;
		justify-content: center;
		gap: 40px;
	}
	section.archives .h1-block .about-movie-text {
		position: relative;
	}
	section.archives .h1-block .about-movie-text p {
		padding: 0;
		width: 80%;
		display: block;
	}
	section.archives .h1-block .about-movie-text>div::after {
		width: 100px;
	}
	section.archives .h1-block .about-movie-text p br {
		display: none;
	}
	ul.interview-list li .text .info .faculty,
	ul.interview-list li .text .info .name{
		line-height: 2.2 !important;
	}
	body.archive ul.interview-list {
		width: 100%;
	}
	ul.interview-list li{
		width: 100%;
	}
	body.home ul.interview-list li::after{
	    width: calc(100% + 65px);
	    left: -40px;
	}
	ul.interview-list li .text .flex {
		gap: 1em;
	}
	section.tags-list .wrapper::after {
		z-index: -1;
	}
	.menu-button-content {
		top: unset;
	}
	.menu-button-content nav {
		padding-top: 60px;
	}
	.menu-button-content,
	.menu-button-content nav {
		transform: translateY(-100%);
	}
	.menu-button-content.opened {
		top: unset;
	}
	.menu-button-content.opened,
	.menu-button-content.opened nav {
		transform: translateY(-60px);
	}
	.menu-button-content nav > ul {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		padding: 80px 20px 80px;
		min-height: calc(100vh + 1px);
	}
	.menu-button-content nav li span:nth-child(2) {
		font-size: .8rem;
		display: block;
		margin-left: 0;
	}
	.menu-button-content nav li.cate{
		margin-top: 2em;
	}
	.menu-button-content nav > ul > li:first-child a::after {
		width: 3em;
	}
	.menu-button-content nav > ul > li:first-child a::before {
		width: 1em;
	}
	ul.interview-list li{
		width: 100%;
		aspect-ratio: unset;
	}
	ul.interview-list li .img_wrapper,
	.feature-box .movie-container{
		border-radius: 20px !important;
	}
	section.tags-list a.yt-banner {
		width: 100%;
	}
	section.tags-list h1::before {
		left: 0;
		bottom: calc(100% + 30px);
	}
	body.archive .page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0 20px;
		height: 200px;
		z-index: 3;
	}
	.single-interview .page-wrap {
		padding-top: 60px;
	}
	body.single-interview h1,
	body.single-interview h2,
	.single-interview section.heading .info01 p.job{
		font-size: 1.3rem !important;
	}
	.single-interview section.heading .info02 .name {
		font-size: 1rem !important;
	}
	.single-interview section.heading {
		height: auto;
		max-height: unset;
		padding: 0;
	}
	.single-interview section.heading .mv img {
		height: 100%;
		aspect-ratio: 1;
	}
	.single-interview .article-sec figure {
		aspect-ratio: unset;
		min-height: unset;
	}
	.single-interview section.heading .text .num {
		flex-direction: column;
		gap: 20px;
	}
	.single-interview section.heading .mv {
		order: -1;
	}
	.single-interview section.heading .mv::after {
		display: none;
	}
	.single-interview section.heading .text {
		width: 100%;
		gap: 40px;
		position: relative;
		bottom: unset;
		padding: 0;
		z-index: 1;
	}
	.single-interview section.heading .text .num span.int,
	.single-interview section.heading .text .num svg text{
		font-size: min(calc((100vw - 40px)/11), 2rem);
	}
	.single-interview section.heading .text .num svg {
		width: min(calc((100vw - 40px)/11*2.5), 5rem);
		height: min(calc((100vw - 40px)/11), 2rem);
	}
	.single-interview section.heading .text .num > div::after {
		display: none;
	}
	.single-interview .heading h1 {
		padding-left: 0;
		& br {
			display: none;
		}
	}
	.single-interview section.heading .text::before {
		background-image:url('/nhd/wp-content/uploads/2025/11/people04.png');
		aspect-ratio: 421/876;
		width: auto;
		min-width: unset;
		height: 80px;
		transform: scaleX(-1) translateY(30%);
		right: 0px;
		top: unset;
		bottom: 100%;
		margin: 0;
	}
	.single-interview section.movie-container::after {
		height: 80px;
		transform: translateY(-30px);
	}
	.single-interview section.heading .infos {
		padding: 15px;
		align-items: flex-start;
		gap: 1rem;
		font-size: 1rem;
		width: 100%;
	}
	.single-interview section.heading .infos .infos-inner {
		flex-direction: column-reverse;
		gap: 20px;
	}
	.single-interview section.heading .infos figure {
		width: 20vw;
		height: 20vw;
	}
	.single-interview section.heading .infos img {
		height: 100%;
	}
	.single-interview section.heading .info01 {
		margin-left: calc((20vw + 15px)*-1);
	}
	.single-interview section.heading .info01 .wrapper {
		width: 100%;
		justify-content: space-between;
		padding-right: 40px;
	}
	.single-interview section.heading .info01 .dept {
		padding: 0;
	}
	.single-interview section.heading .info02 {
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 15px;
		min-height: 20vw;
	}
	.single-interview section.heading .infos a.external-link {
		position: absolute;
		right: 15px;
	}
	.single-interview .article-sec,
	.single-interview .article-sec:nth-child(2n){
		flex-direction: column;
	}
	.single-interview section.heading.no-movie {
		padding: 0;
	}
	.single-interview section.article {
		padding-top: 0;
	}
	.single-interview .article-sec .txt {
		padding: 0;
	}
	.single-interview .article-sec figure img {
		width: 100%;
	}
	.single-interview #slider {
		padding: 0;
		width: 100vw;
		margin-top: 0;
	}
	.single-interview #slider li {
		margin: 40px 40px 0;
	}
    .single-interview #slider .info {
        padding: 0;
		bottom: .5em;
    }
	.go-top.position-right {
		bottom: 10px;
	}
	.go-top.position-right span {
		font-size: .6rem;
	}
}

@media only screen and (max-width: 389px) {
	.leading-text-box svg {
		margin-bottom: 0;
	}
	ul.interview-list li .text p.company, ul.interview-list li .text p.job {
		font-size: 1.2rem;
	}
	.single-interview ul.list-links {
		font-size: .8rem;
	}
	
}