@charset "utf-8";
/* home
-------------------------------------------------------------------*/

.home section[id]{
    padding-block: 3.75em;
    position:relative;
    z-index:2;
}
.home section#visual{
    padding-block:0;
}
.home section#visual:after{
    content:"";
    width:492px;
    aspect-ratio:492 / 555;
    display:block;
    background:var(--bgcolor);
    position:absolute;
    z-index:-1;
    top:250px;
}

.home section#visual .mv {
    position:relative;
    z-index:2;
    padding-block:3.5em 0;
	--height:max(450px,32.5vw);
}
.home section#visual .mv:after{
    content:"";
    display:block;
    position:absolute;
    inset:0 0 0 auto;
    background:var(--subcolor);
    width:791px;
    z-index:-2;
}
.home section#visual .mv .bg{
    position:absolute;
    inset:auto 0 0 auto;
    z-index:-1;
	height:var(--height);
}
.home section#visual .mv .bg img{
	height:100%;
	width:auto;
}
.home section#visual .mv .box{
    background:var(--bgcolor02);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-left:50px;
    background: linear-gradient(90deg, #fafafa 50% 65%, transparent);
    max-width:790px;
	height:var(--height);
    margin-bottom:3.5em;
}
.home section#visual .mv hgroup{
    margin-bottom: 1.0em;
    letter-spacing: -0.03em;
}
.home section#visual .mv hgroup h1{
    font-size:3.3125rem;
    font-weight:800;
    line-height: 1.1;
}
.home section#visual .mv hgroup p{
    font-weight:800;
    font-size:2rem;
}
.home section#visual .mv .box > p{
    font-size:1.125rem;
    line-height: 1.8;
}
.home section#visual .mv .box small{
	display:block;
	line-height:1.6;
	text-indent:-1.5em;
	margin-top:0.5em;
	font-size:0.81rem;
	margin-left:1.5em;
}
.home section#visual .fv-news{
    margin-block: 1.875em 3em;
}
@media (min-width:1601px) {
	.home section#visual .mv {
		--height:min(32.5vw,675px);
	}
	.home section#visual .mv .box{
		max-width: 60%;
		padding-left:10%;
	}
	.home section#visual .mv .sitewrap{
		width:auto;
		margin-left:5%;
	}
}
.home section#outline{
    padding-block: 0 7.5em;
}
.home section#outline .flex{
    align-items:stretch;
    --width:550px;
}
.home section#outline .col-image{
    flex:auto;
    width:var(--width);
    overflow: hidden;
}
.home section#outline .col-texts{
    flex:auto;
    width:calc(100% - var(--width));
    padding-inline: 3.5em;
}
.home section#outline h2{
    font-size:2.25rem;
    font-weight:600;
    color:var(--keycolor);
    margin-block: 0.5em;
    line-height: 1.2;
}
.home section#outline p{
    font-size:1.1875rem;
    margin-bottom:1.5em;
}
.home section#outline .typo{
    font-size:5rem;
    font-weight:500;
    color:var(--bgcolor);
    position:absolute;
    z-index:-1;
    inset:auto auto 0 0;
    line-height: 1;
    white-space: nowrap;
}
.home section h2{
    font-size:2.25rem;
    font-weight:600;
    text-align:center;
    margin-bottom: 0.875em;
}
.home section#exam_guide{
    padding-block: 2.25em 5em;
}
.home section#exam_guide .menu .sitewrap{
    background:#f5f5f5;
    padding-block:3.5em;
    margin-bottom: 4.5em;
}
.home section#exam_guide .other a {
    width:min(865px,100%);
    margin-inline:auto;
    justify-content:center;
    align-items: stretch;
    overflow:clip;
    border-radius: 0.5em;
    background: var(--keycolor);
    text-decoration:none;
    position:relative;
    z-index:2;
}
.home section#exam_guide .other a:after{
    content:"";
    background: #1E293D;
    background: linear-gradient(-45deg,rgba(40, 73, 133, 1) 0%, rgba(30, 41, 61, 1) 100%);
    position:absolute;
    inset:0;
    display:block;
    z-index:-1;
}

.home section#exam_guide .other a .text-content{
    flex-grow:1;
    color:#fff;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 1.5em 2.5em;
    gap: 0.5em;
}
.home section#exam_guide .ttl-set{
    display:flex;
    gap:0.5em;
    align-items:center;
}
.home section#exam_guide .ttl-set strong{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent01);
    border-radius:50%;
    font-weight:400;
    height: 4.75em;
    aspect-ratio:1 / 1;
    text-align:center;
    line-height:1.2;
}
.home section#exam_guide .ttl-set em{
    font-size:1.125rem;
    font-weight:500;
    display:flex;
    flex-direction:column; 
}
.home section#exam_guide .ttl-set em b{
    font-size:1.55em;
    white-space:nowrap;
    color:var(--accent01);
}
.home section#exam_guide .text-content p{
    line-height:1.6;
    max-width:26em;
    font-weight: 500;
    margin-bottom: 0.5em;
}
.home section#exam_guide .image-content{
    position:absolute;
    inset:0 0 0 auto;
    flex: auto;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.home section#exam_guide .image-content img{
    height:100%;
    width:auto;
}
@media (any-hover: hover) {
    .home section#exam_guide .other a:hover{
        transform:translateY(0.5em);
    }
    .home section#exam_guide .other a:hover:after{
        opacity:0;
    }
}

.home section#merit{
    background:var(--bgcolor);
    padding-block: 3.75em 5.5em;
}
.home section#merit h2{
    margin-bottom:1.5em;
}
.home section#merit .flex{
    position:relative;
    z-index:2;
    max-width:1000px;
    margin-inline:auto;
}
.home section#merit .flex:before{
    content:"";
    display:block;
    aspect-ratio:1 / 1;
    height: 7.25em;
    background: #6BAEE6;
    background: linear-gradient(-45deg,rgba(107, 174, 230, 1) 0%, rgba(26, 87, 177, 1) 100%);
    pointer-events:none;
    position:absolute;
    opacity:0.9;
    top:-3em;
    right:-3em;
}
.home section#merit .col-texts{
    padding-inline:0em 4.0em ;
}
.home section#merit .flex h3 em{
    display:block;
    color:var(--keycolor);
    font-weight:800;
}
.home section#merit .flex h3 em strong{
    font-size:2.5rem;
    font-weight:600;
    line-height:1;
    margin-left:0.25em;
    letter-spacing:0em
}
.home section#merit .flex h3 b{
    font-size:2rem;
    margin-block:0.25em 1.0em;
    display:block;
}
.home section#merit .flex p{
    line-height:1.8;
}
.home section#merit .flex:nth-child(even){
    flex-direction:row-reverse;
    margin-block:5em;
}
.home section#merit .flex:nth-child(even):before{
    right:auto;
    left:-3em;
}
.home section#merit .flex:nth-child(even) .col-texts{
    padding-inline:4.0em 0em ;
}

.home section#flow{
    background:var(--keycolor);
    color:#fff;
    padding-block:3.75em 5em;
}
.home section#flow .box{
    background:#fff;
    color:var(--fontcolor);
    max-width:820px;
    margin:0 auto 3.25em;
    padding:2.5em 1.5em 1.5em;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.home section#flow .box h3{
    color:var(--subcolor);
    font-size:1.5rem;
    font-weight:600;
    margin:0 auto 1em;
}
.home section#flow .btn {
    --color02: var(--keycolor);
    border-color:var(--color01);
}
.home section#example{
	background:var(--bgcolor)
}
.home section#example h2{
    text-align:left;    
}
.home section#example .slide-wrap{
	margin-bottom:3em;
}
.home section#example .slick-arrow{
    border:solid 1px;
    border-radius:50%;
    aspect-ratio:1 / 1;
    height:2.625rem;
    color:var(--subcolor);
    background:#fff;
    width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: auto;
    top: -3rem;
    bottom: auto;
}
.home section#example .slick-arrow:before{
    content:"";
	height:0.45em;
	aspect-ratio: 1 / 1;
	mask: center center / contain repeat-x;
	mask-image: url(../img/common/icon-arrow.svg);
	background-color:var(--subcolor);
	transition: .3s;
    display:block;    
}
.home section#example .slick-prev:before{
	transform:scale(-1,1);
}
.home section#example .slick-prev{
	right:3.25rem;
	left:auto;
}
.home section#example .slick-next{
	right:0;
}
.home section#example .slick-dots{
    position:absolute;
    inset: -3.5em 8em auto auto;
    width: auto;
    display:flex;
    align-items:center;
    gap:1em;
}
.home section#example .slick-dots button{
    background:#bababa;
    content:"";
    border-radius:50%;
	width:0.625rem;
	height:0.625rem;
}
.home section#example .slick-dots button:before{
    display:none;
}
.home section#example .slick-dots :is(button:hover,.slick-active button){
    background:var(--keycolor);
}
.home section#example .slick-arrow:hover{
	background:var(--subcolor)
}
.home section#example .slick-arrow:hover:before{
	background:#fff;
}

.home section#topics .news-style{
	--width:160px;
	max-width:1000px;
	margin-inline:auto;
}
.home section#topics .news-style :is(.news-head,.btn){
	float:left;
	width:var(--width);
	text-align:left;
}
.home section#topics .news-style .news-body{
	float:right;
	width:calc(100% - var(--width));
	padding-left: 5em;
}

.home section#app-contact{
	z-index:2;
	padding-block: 0 4.25em;
}

.home section#app-contact .card-style{
	padding-block: 0.5em 3em;
}
.home section#app-contact:after{
	content:"";
	display:block;
	position:absolute;
	z-index:-2;
	background:var(--subcolor);
	inset: 12.5em 0 0 0;
}
.home section#app-contact .card-style .flex{
	justify-content: space-between;
	max-width:807px;
	margin-inline:auto;
}
.home section#app-contact .card-style .flex a{
	background:#fff;
	max-width:380px;
	text-decoration:none;
	margin: 0;
}
.home section#app-contact .card-style .flex .box{
	padding: 1.25em 1em 1.75em;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.home section#app-contact .card-style .flex .box h3{
	font-size:1.5rem;
	font-weight:600;
}
.home section#app-contact .card-style .flex .box p{
	margin-block: 0.5em 1.25em;
}

.home section#app-contact .card-style .flex .btn{
	--color02:var(--keycolor);
}
.home section#app-contact .card-style .flex a:nth-child(2) .btn{
	--color02:var(--accent01);
}
.home section#app-contact .typo{
	color:#283245;
	font-size:7.5rem;
	position:absolute;
	z-index:-1;
	white-space:nowrap;
	inset: 2.35em 0 0 auto;
	letter-spacing:0;
}
.home section#app-contact .other-title{
	font-size:1.5rem;
	color:#fff;
	text-align:center;
	margin-bottom:1em;
}
.home section#app-contact .other-contact{
	color:#fff;
	display:flex;
	justify-content:center;
	gap: 2rem;
	font-size:1rem;
	text-align:left;
	line-height: 1;
	--width:15rem;
	align-items:flex-start;
	border:solid 1px;
	padding:1em;
	max-width:920px;
	margin-inline:auto;
}
.home section#app-contact .other-contact + .other-contact {
	margin-top:1em;
}
.home section#app-contact .other-head{
	width:var(--width);
	display:flex;
	align-items:center;
	background:#fff;
	color:var(--subcolor);
	justify-content:center;
	padding:0.5em;
}
.home section#app-contact .ohter-body{
	font-size:1.25em;
	width:calc(100% - var(--width) - 2rem);
	flex-grow:1;
	display:flex;
	flex-direction:column;
	gap:0.25em;
	line-height:1.4;
}
.home section#app-contact .ohter-body small{
	font-size:0.75rem;
}
@media (max-width:1200px) {
	.home section#visual .mv .box{
		width: fit-content;
		background: linear-gradient(90deg, #fafafa 50% 75%, transparent);
		text-shadow:0 0 1em #fff,0 0 0.5em #fff,0 0 0.5em #fff;
	}
	.home section#visual .mv .bg{
		inset: 3.5em 0 0 25%;
	}
	.home section#visual .mv .bg img{
		object-fit:cover;
		height:100%;
	}
	.home section#outline .flex{
		--width:45%;
	}
	.home section#outline .col-texts{
		padding-inline:2em 0;
		width: auto;
	}
	.home section#outline h2{
		text-align:left;
	}
	.home section#merit .flex:before{
		height:4em;
	}
	.home section#topics .news-style{
		padding-inline:var(--inner);
		max-width:100%;
	}
	.home section#topics .news-style .news-body{
		padding-left:2.5em;
	}
	.home section#merit .flex{
		padding-inline:var(--inner);		
	}
	.home section#merit .flex:nth-child(odd) .col-texts{
		padding-inline:0 2em ;
		flex-shrink:1;
	}
	.home section#merit .flex:nth-child(even) .col-texts{
		padding-inline:2em 0;		
		flex-shrink:1;
	}
	.home section#merit .flex .col-image{
		flex-grow:1;
		min-width:37.5%;
	}
	.home section#example .slide-wrap .slide a{
		max-width:calc(100% - 1em);
	}
	.home section#exam_guide .other a{
		margin-inline:var(--inner);
		width:auto;
	}
	.home section#app-contact .other-contact{
		margin-inline:var(--inner);
		gap:1rem;
	}
}

@media (max-width:900px) {
	.home section#outline .flex {
	    align-items: center;
		max-width:var(--width);
		--width:480px;
		margin-inline:auto;
	}
	.home section#outline h2 br{

	}
	.home section#outline .col-image{
		width:auto;
	}
	.home section#outline .btn{
		margin-inline:auto;
	}
	.home section#merit .flex{
		max-width:480px;
		
	}
	.home section#merit .flex:nth-child(even){
		flex-direction: column;
		padding: 0;
	}
	.home section#merit .flex h3{
		text-align:center;
	}
	.home section#merit .flex h3 b{
		margin-bottom:0.5em;
	}
	.home section#merit .flex .col-image{
		min-width:0;
	}
	.home section#topics .news-style :is(.news-head,.btn){
		float:none;
		width:auto;
		text-align:center;
	}
	.home section#topics .news-style .news-body{
		float:none;
		width:auto;
		padding:0;
		margin-block:0 2em;
	}
	.home section#topics .news-style .btn{
		margin-inline:auto 0;
		width:fit-content;
	}
	.home section#app-contact .card-style .flex{
		flex-direction:column;
		gap:2em;
		align-items:stretch;
	}
	.home section#app-contact .card-style .flex a{
		max-width:100%;
		display:flex;
		box-shadow:0 0 1px #000;
	}
	.home section#app-contact .card-style .flex .box{
		flex-grow:1;
		padding:1em;
		justify-content:center;
		flex: 1;
	}
	.home section#app-contact .card-style .flex .img-fit{
		flex: 1;
	}
	.home section#app-contact .card-style .flex .img-fit img{
		object-fit:cover;
		height:100%;
	}
}

@media (max-width:767px) {
	.home section#visual .mv {
		margin-bottom: 3.0em;
	}
	.home section#visual .mv:after{
	    width:100%;
		bottom:auto;
		height:3.5em;
	}
	.home section#visual .mv .bg{
	    position: relative;
	    background:#fff;
	    padding-top: 6em;
	    inset:0 0 0 1em;
	    height: auto;
	}
	.home section#visual .mv .bg:after{
        background: linear-gradient(180deg, #fafafa 0% 45%, transparent);
        content:"";
        display:block;
        inset:0 0 auto 0;
        height: 4.5em;
        position:absolute;
        z-index:2;
	 }
	.home section#visual .mv .box{
	    height:auto;
	    padding-left:var(--inner);
	    max-width:100%;
	    padding-block:1.5em 0em;
	    background: transparent;
	    width:100%;
	    z-index:2;
	    margin: 0;
	    position: absolute;
	}
	.home section#visual .mv hgroup h1{
	    font-size:min(7.75vw,2.0rem);
	    font-weight:800;
	    line-height: 1.1;
	}
	.home section#visual .mv hgroup h1 br{
		display:none;
	}
	.home section#visual .mv hgroup p{
	    font-weight:800;
	    font-size:min(5.75vw,1.65rem);
	}
	.home section#visual .mv .box > p{
	    font-size:1rem;
	    line-height: 1.5;
	}
	.home section#visual .mv .bg img{
		width:100%;
		height:auto;
	}
	.home section#visual .mv .box small{
		font-size:0.75rem;
		margin-top:1em;
		line-height: 1.5;
	}
	.home section#visual:after{
		width:246px;
		top: 500px;
	}
	.home section#outline{
		padding-bottom: 2.25em;
	}
	.home section#outline h2{
		font-size: 1.66rem;
	}
	.home section#outline p{
		font-size:1rem;
	}
	.home section h2{
	    font-size:1.66rem;
	}
	.home section#exam_guide .other a{
		flex-direction:column;
		padding:0;
		overflow:visible;
	}
	.home section#exam_guide .other a:after{
		border-radius:0.875rem;
	}
	.home section#exam_guide .other a .text-content{
		padding: 3em 1.5em 1.5em;
		align-items:center;
	}
	.home section#exam_guide .ttl-set{
		text-align:center;
		justify-content:center;
	}
	.home section#exam_guide .ttl-set em b{
		white-space:nowrap;
		font-size:1.45rem;
	}
	.home section#exam_guide .ttl-set strong{
		position:absolute;
		left:-1.0em;
		top:-1.0em;
	}
	.home section#exam_guide .text-content p{
		font-size:0.94rem;
	}
	.home section#exam_guide .image-content{
		position:relative;
		clip-path: none;
		border-radius:0 0 1rem 1rem;
		overflow:clip;
	}
	.home section#exam_guide .image-content img{
		height:181px;
		width:125%;
		object-fit:cover;
	}
	.home section#exam_guide .icon-card img{
		width:45px;
	}
	.home section#exam_guide .icon-card p{
		font-size:0.94rem;
		text-align:center;
	}
	.home section#merit .flex:before{
		height:2.5em;
		top: -2em;
	    right: -0.5em;
	}
	.home section#merit .flex:nth-child(even):before{
		left:-0.5em;
	}
	.home section#merit .flex{
		max-width:100%;
		padding:0;
	}
	.home section#merit .flex h3{
		display:flex;
		gap:0.5em;
		align-items:baseline;
	}
	.home section#merit .flex h3 b{
		font-size:1.375rem;
	}
	.home section#merit .flex h3 em strong{
		font-size:2rem;
	}
	.home section#flow{
		padding-block:3.5em 3.5em
	}
	.home section#flow .flow-card{
		max-width: 100%;
		padding-inline: var(--inner);
		width: 100%;
	}
	.home section#flow .flow-card img{
		width:45px;
	}
	.home section#flow .box{
		margin-inline:var(--inner);
		padding:1em 1em 1.5em;
		margin-bottom: 2.5em;
	}
	.home section#flow .box h3{
		font-size:1.11rem;
	}
	.home section#flow .box .btns{
		gap:0.5em;
	}
	.home section#example .slide-wrap{
		margin:0;
		padding-bottom:4em;
	}
	.home section#example .slick-arrow{
		top:auto;
		bottom:0em;
	}
	.home section#example .slick-dots{
		top:auto;
		bottom:2em;
		left: 0;
	}
	.home section#app-contact{
		padding-bottom:3.5em;
	}
	.home section#app-contact .other-contact{
		flex-direction:column;
		padding:0.75em;
	}
	.home section#app-contact :is(.other-head,.ohter-body){
		width:100%;
	}
	.home section#app-contact .other-contact .ohter-body p{
		font-size:1.1rem;
	}
}
@media (max-width:500px) {
	.home section#app-contact .card-style .flex{
		flex-direction:row;
		flex-wrap:wrap;
		gap:2em 2%;
		justify-content:center;
	}
	.home section#app-contact .card-style .flex a{
		flex-direction:column;
		max-width:280px;
	}
}

/**/