@charset "utf-8";

/*
/*    CSS(pctb) MENU
*/

:root {
	--head_height: 0;
	}
body {
	min-width: 1280px;
}

header .nav_wrap .nav_menu {
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
	transition: 0.5s ease;
	opacity: 1;
}

header .nav_wrap .nav_menu:hover {
	opacity: 0.7;
	transition: 0.5s ease;
}
header .nav_wrap .nav_menu p::before, 
header .nav_wrap .nav_menu p::after, 
header .nav_wrap .nav_menu p span::before {
	width: 30px;
}

header .nav_wrap .nav_menu p {
	padding-right: 50px;
	line-height: 1;
}

.mv_wrap {
    position: relative;
    display: flex;
    align-items: stretch; /* 子要素の高さが揃うように */
    justify-content: space-between;
}

.mv_wrap .mv {
    width: 55%;
}

.chatch_wrap {
    position: relative;
    width: 45%;
    padding: 0 20px;
}

.chatch_wrapin {
    /* stickyの設定 */
    position: sticky;
    top: 0;
    
    /* 100vh か 親の高さの小さい方を高さとして採用する */
    height: min(100vh, 100%); 
    
    /* 中身の中央寄せ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* 余白の計算を崩さないように */
    box-sizing: border-box;
}
.chatch_wrap .lang {
    margin-top: 60px; /* 余白が大きすぎる場合は調整 */
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 20px;
}

.chatch_wrap .lang dd ul {
	gap: 10px;
}


.chatch_wrap .lang dd ul a {
	font-size: 2rem;
	padding: 32px;
}

header .nav_wrap {
	position: relative;
	padding: 0;
}

main {
	display: grid;
	direction: rtl;
	grid-template-columns: 1fr 320px;
}main>* {
	direction: ltr;
}

aside {
	transform: inherit;
	width: 100%;
	border-right: 2px solid #fff;
	position: sticky;
	top: 0;
	left: 0;
	height: 100vh;
}

aside::after {
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	top: 0;
	right: 10px;
	background: #fff;
}


aside ul a {
	font-size: 1.8rem;
	letter-spacing: 0;
	padding: 1px 0;
	position: relative;
	transition: 0.5s ease;
	color: #fff;
}

aside ul a::before {
	position: absolute;
	content: "";
	background: var(--yellow);
	top: 0;
	right: calc(100% + 30px);
	height: 100%;
	width: calc(100% + 50px);
	transition: 0.5s ease;
	z-index: -1;
}

.aside_in {
	padding: 40px 28px 20px 20px;
}

aside ul a.cr  {
	font-size: 2.1rem;
	color: var(--color);
	transition: 0.5s ease;
}

aside ul a.cr::before{
	right: -20px;
}

.aside_in ul {
	gap: 15px;
			height: 145px;
}

.aside_in .btn a {
	margin-top: 40px;
	padding: 14px 16px 18px 25px;
}

.aside_in .btn a::after {
	right: 13px;
	width: 14px;
}

mai>* {
	direction: ltr;
}

#overview .tl .en {
	font-size: 3.5rem;
}

#overview .tl .ja {
	font-size: 1.9rem;
}

#overview .inner {
	display: grid;
	grid-template-columns: 1fr 930px;
}

#overview {
	padding-block: 180px;
}

#overview .con {
	margin: 0;
}

#overview table tr>* {
	font-size: 1.9rem;
	padding-block: 17px;
	line-height: 1.6;
}

#overview table th {
	width: 170px;
}

#howtoapply {
	background-image: url(../img/flow_bg_pc.png);
	padding-block: 180px;
}

#howtoapply .tl .en {
	font-size: 5.6rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

#howtoapply .tl .en em {
	font-size: 2.8rem;
	padding-right: 0;
	margin-left: -8px;
}

#howtoapply .tl .ja {font-size: 2.087rem;}

#howtoapply .inner {
	display: grid;
	grid-template-columns: 1fr 930px;
	align-items: center;
}

#howtoapply .howtoapply_li {
	margin-top: 0;
	grid-template-columns: 1fr 1fr 1fr 228px;
	gap: 10px;
}

#howtoapply .howtoapply_li li {
	padding: 40px 5px 25px 5px;
	font-size: 1.7rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#howtoapply .howtoapply_li .num {
	font-size: 1.5rem;
	width: 50px;
	height: 25px;
	padding-top: 1px;
}

#howtoapply .howtoapply_li li:not(:last-child)::before {
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	width: 20px;
	height: 40px;
	top: 50%;
	right: -21px;
	transform: translate(0%, -50%);
	bottom: inherit;
	left: inherit;
}

#howtoapply .howtoapply_li li:not(:last-child)::after {
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	width: 20px;
	height: 40px;
	top: 50%;
	right: -18px;
	transform: translate(0%, -50%);
	bottom: inherit;
	left: inherit;
}

#howtoapply .howtoapply_li .btn a {
	width: 180px;
	padding: 15px 17px 18px 17px;
	border-radius: 50px;
	margin: 10px auto;
}

#howtoapply .howtoapply_li .btn a::after {
	width: 11px;
	right: 12px;
}

footer .f_partner_wrap {
	padding: 40px 0 50px;
}

footer .f_partner_wrap dt {
	font-size: 2.2rem;
	padding-bottom: 10px;
}

footer .f_partner_wrap dd a {
	width: 350px;
	padding: 18px 26px;
}

footer .copy_wrap {
	padding: 10px 20px 10px 10px;
	display: grid;
	grid-template-columns: 500px 1fr;
	align-items: center;
}

footer .copy_wrap .otoiawase a {
	font-size: 1.9rem;
	padding: 13px;
}

footer .copy_wrap small {
	font-size: 1.3rem;
	letter-spacing: 0.075em;
}

footer .copy_wrap .copyin {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 58px;
	gap: 15px;
	text-align: right;
	align-items: center;
}

footer .copy_wrap .logo_jfa {
	width: 100%;
	margin: 0;,
	a: ;
}