@charset "utf-8";



/* トップ
-------------------------------------------------------------------*/
:root :is(section, .section){
  position: relative;
  z-index: 5;
}

body.home #global-header{
	background:transparent;
}
body.home main{
	padding-top:0;
}
body.home #mv {
	--height:1172px;
}
body.home #mv .vision-wrap{
	position:relative;
	z-index:2;
	height:var(--height);
}
body.home #mv .mv-item img{
	height:var(--height);
	object-fit:cover;
	width:100%;
}
body.home #mv .mv-txt{
	position:absolute;
	z-index:5;
	top:calc(var(--header) + 8em);
	left:48%;
}
body.home .section[id]{
	padding-block:4.5em;
}
body.home .bg_message{
	background:url(../img/top/message-bg.png) no-repeat;
	background-position-y:6.25em;
}
body.home #message{
	margin-top:-4em;
	padding-block:0em 12em;
	position:relative;
	z-index:2;
	mix-blend-mode:multiply;
}
body.home #message .lang-title{
	display:flex;
	flex-direction:column;
	gap:1em;
	font-size:1.75rem;
	text-align: center;
}
body.home #message .lang-title [lang="en"]{
	color:var(--key01);
	font-weight:500;
}
body.home #message .lang-title p{
	font-size:2.25rem;
	font-weight: 700;
	line-height:2.25;
}
body.home hgroup.lang-title{
	display:flex;
	flex-direction:column;
	gap:0;
	font-size:1.25rem;
	margin-bottom:2.5em;
}
body.home hgroup.lang-title [lang="en"] {
	font-weight:500;
	font-size:5em;
	line-height: 1.2;
}
body.home .lead{
	font-size:1.125rem;
	font-weight:500;
}
body.home .lead p{
	line-height: 2;
	font-weight:400;
}
body.home #pickup .lang-title{
	text-align:center;
}
body.home #pickup .card-style.commons{
	margin-top:3em;
	padding-top:3em;
	border-top:solid 2px var(--lgray2);
}
body.home #interview{
	position:relative;
	z-index:2;
}
body.home #interview .interview-top{
	display:flex;
	align-items:center;
	gap: 4%;
	margin-bottom:3.25em;
}
body.home #interview .interview-top .lang-title{
	margin-block:2em ;
}
body.home #interview .interview-top .detail{
	margin-inline:auto 0;
}
body.home #interview .interview-bottom{
	padding-inline:0;
}
body.home #interview .interview-bottom:after{
	content:"";
	display:block;
	inset:50% 0 0 0;
	background:var(--lgray);
	position:absolute;
	z-index: -2;
}
body.home #interview .interview-bottom .voice_card:nth-child(even) a{
	margin-top: 5.5em;
}

body.home #process{
	background:var(--lgray);
	padding-bottom: 9em;
	overflow: hidden;
}
body.home #process .widewrap .box{
	background:var(--key01);
	color:#fff;
	padding: 4.75em 4.75em 9em;
	border-radius:2.5em;
	position:relative;
	z-index:1;
	overflow:hidden;
}
body.home #process .widewrap .box:after{
	content:"";
	display:block;
	inset:auto 0 0 0;
	height: 10em;
	position:absolute;
	z-index:1;
	background: rgb(23 31 144);
	background: linear-gradient(180deg,rgba(23, 31 ,144 , 0) 0%, rgba(23, 31 ,144 ,1) 50%);
}
body.home #process .widewrap .scroll_wrap{
	display: flex;
	max-height: min(calc(100svh - var(--header) - 8em),752px);
	overflow-y: auto;
	scrollbar-width: none;
	justify-content: space-between;
	position: relative;
	gap:2em;
}

body.home #process .process-fix{
	display:flex;
	align-items:center;
	gap: 4%;
}
body.home #process .process-fix .lang-title{
	margin-block:2em ;
}
body.home #process .process-fix .detail{
	margin-inline:auto 0;
}
body.home #process .process-step ol{
	margin:0;
	padding: 0;
	display:flex;
	gap: 1.5em;
}
body.home #process .process-step li{
	margin:0;
	list-style:none;
	flex:1;
}

body.home #process .process-step li .pht{
	flex-basis:var(--thmb);
	overflow:hidden;
	border-radius:0.65em;
	width: fit-content;
}
body.home #process .process-step li .en{
	font-size:1.5rem;
	font-weight:400;
	width:2rem;
	line-height:1.25;
}
body.home #process .process-step li .data h3{
	font-size:1.25em;
	margin-block:1em 0.5em;
	font-weight:500;
	display:flex;
	gap:0.5em;
	line-height:1.4;
}
body.home #process .process-step li p{
	font-weight:400;
	font-size:0.875rem;
}
body.home #process .typo{
	color:#fff;
	font-size:19.48em;
	font-weight:300;
	position:absolute;
	bottom:0;
	z-index:5;
	line-height: 0.55;
	white-space:nowrap;
	left:-0.15em;
	text-shadow:0 0 0.1em rgba(255,255,255,0.5);
	filter: drop-shadow(0 0 0.25em rgba(255, 255, 255,0.25));
	letter-spacing: 0;
	pointer-events: none;
}
@media screen and (max-width:1800px) {
	body.home #process .process-step ol{
	}
	body.home #process .process-step li{
		--width:100%;
	}
	body.home #entry .typos .typo{
		font-size:min(9vw,11.25em);
	    text-shadow: 0 0 0.1em rgba(255, 255, 255, 1);
	    filter: drop-shadow(0 0 0.1em rgba(255, 255, 255, 1));
	}
}
@media screen and (max-width: 1600px){
	body.home #mv{
		--height:860px
	}
	body.home #mv .vision-wrap{
		margin-top:var(--header);
	}
	body.home #interview{
		display:flex;
		flex-direction:column;
		gap:2em;
		padding: 0;
	}
	body.home #interview .interview-top{
		display:contents;
	}
	body.home #interview .interview-top :is(.lang-title,.lead){
		text-align:center;
		padding-inline:var(--inner);
	}
	body.home #interview .interview-top .detail{
		order:2;
		margin:5em auto 0;
		z-index: 5;
		position: relative;
	}
	body.home #interview .interview-bottom{
		flex-basis:100%;
		width: 100%;
	}
	body.home #process .widewrap .box{
		padding-inline:0;
		flex-direction:column;
		gap:0;
		display:flex;
		padding: 0 var(--inner) 3em;
	}
	body.home #process .process-fix{
		position:static;
		display:contents;
		text-align:center;
	}
	body.home #process .process-fix .lead{
		order:1;
		margin-block:2em  0em;
	}
	body.home #process .process-fix .detail{
		order:2;
		margin:auto;
		padding-block:0 5em;
	}
	body.home #process .process-step ol{
		padding: 0;
	}
	body.home #process .typo{
		font-size:16.5em;		
	}
	body.home #entry .entry-box{
		padding-inline:var(--inner);
	}
	body.home #entry .typos .widewrap {
		padding-block:4em 8em;
	}
	body.home #entry .typos .widewrap .lead{
		font-size:min(3.25vw,2.8725rem);
	}
	body.home #entry .typos .widewrap .typos-img01{
		max-width:45%;
		right:var(--inner);
	}
	body.home #entry .typos .widewrap .typos-img02{
		max-width:35%;
		left:var(--inner);
	}
}

@media screen and (max-width:1200px){
	body.home #mv{
		--height:auto;
	}
	body.home #mv .mv-txt{
		inset:0;
		display:flex;
		align-items:center;
		justify-content: center;
		margin:auto;
	}
	body.home #entry .entry-box .lead span{
		display:block;
	}
}

@media screen and (max-width:767px){
	body.home #mv .vision-wrap{
		margin:0;
	}
	body.home #mv .mv-txt{
		width: 230px;
		inset: auto;
		top: 6em;
		right: 0em;
	}
	body.home .bg_message{
		position:relative;
		z-index:5;
	    background-position-y: 0em;
		background-size:960px;
	}
	body.home #message .lang-title p{
		font-size:1.25rem;
	}
	body.home #message{
		padding-bottom:2em;
	}
	body.home hgroup.lang-title{
		font-size:1.125rem;
		margin-bottom: 1.75em;
	}
	body.home hgroup.lang-title [lang="en"] {
		font-size:2.5em;
	}
	body.home #interview .interview-top .lead{
		text-align:left;
		font-size:1rem;
	}
	body.home #interview .interview-bottom{
		width:100%;
		padding-inline:var(--inner);
		overflow:hidden;
	}
	body.home #interview .interview-bottom:after{
		top:75%;
	}
	body.home #interview .interview-bottom .voice_card:nth-child(n+2) {
		display:none;
	}
	body.home #interview .interview-top .detail{
		margin:0;
	}
	body.home #process .widewrap .box{
		padding:2em var(--inner);
	}
	body.home #process .widewrap .scroll_wrap{
		max-height:fit-content;
	}
	body.home #process .process-step ol{
		display:block;
	}
	body.home #process .process-step li{
		margin-inline: auto;
		max-width: 366px;
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	body.home #process .process-step li + li{
		margin-top:2.25em;
		padding-top:2.25em;
		border-top:solid 2px rgba(215,215,215,0.5);
	}
	body.home #process .process-step li .pht{
		margin-inline: auto;
	}
	body.home #process .process-step li .data h3{
		margin: 1em 0 0.75em;
		font-size:1.25rem;
	}
	body.home #process .process-step li p{
		font-size:0.875rem;
	}
	body.home #process .widewrap .box:after{
		z-index:-2;
	}
	body.home #process .process-fix .detail{
		padding-bottom:2.5em;
	}
	body.home #process{
		padding-bottom:1.5em;
	}
	body.home #process .typo{
		font-size:8rem;
	}
	body.home #entry .entry-box .lead{
		font-size:1.375rem;
	}
	body.home #entry .entry-box{
		padding-bottom:1.5em;
		border-radius:1rem
	}
	body.home #entry .typos .widewrap{
		margin-block:2em;
		padding-block:4.0em;
	}
}


/*flow*/
body.post-name-flow .vk_timeline .vk_timeline_item_caption{
	font-size: 1.375rem;
	line-height:1;
	margin-block: 0;
	position: relative;
	top: -0.75em;
	background: #f2f8fd;
	padding: 0.625em 0.5em;
	border-radius: 5px;
	color: var(--fontcolor);
}
@media screen and (max-width:767px){
	body.post-name-flow .vk_timeline .vk_timeline_item_caption{
		font-size: 1.14rem;
		margin-block: 0 0.25em;
		top: -0.5em;
		padding: 0.625em 0.5em;
	}
}

/*voice*/
:root .category-list{
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
	gap: 0.5em 1.5em;
	padding:0;
	list-style:none;
	margin-bottom:3em;
}
:root .category-list .category-item{
	width: fit-content;
	margin: 0;
}
:root .category-list .category-item a{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1em;
	position: relative;
	padding-bottom:0.5em;
	text-decoration: none;
	margin: 0;
}
:root .category-list .category-item a .arrow{
	height:30px;
}
:root .category-list .category-item a .arrow:before{
	height: 1px;
    width: 8px;
}
:root .category-list .category-item a .arrow:after{
	height: 6px;
	width: 6px;
	border-top-width: 1px;
	border-right-width: 1px;
	top: 11.5px;
	left: 13px;
}
:root .category-list .category-item a:before{
	content:"";
	width:100%;
	height:1px;
	position:absolute;
	inset:auto 0 0 0;
	margin:auto;
	background:var(--key01);
	transform-origin:left top;
	transform:scale(1);
	transition: var(--hover);
}
:root .category-list .category-item.active a:before{
	transform:scale(0);
}
:root .category-list .category-item.active a .arrow{
	background: var(--key01);
	border-color: var(--key01);
	--fontcolor: #fff;
}	
@media (hover: hover) and (pointer: fine),
(hover: none) and (pointer: coarse) {
	:root .category-list .category-item a:hover:before{
		transform-origin:right top;
		transform:scale(0);
	}
}
@media screen and (max-width:767px){
	:root .category-list .category-item a .arrow{
		height:24px;
	}
	:root .category-list .category-item a .arrow:before{
		height: 1px;
		width: 7px;
	}
	:root .category-list .category-item a .arrow:after{
		height: 5px;
		width: 5px;
		top: 0.625em;
		left: 10px;
	}
}