@charset "UTF-8";

/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/

#mv{
	position : relative;
	overflow : hidden;
	width : 100%;
}

#mv > *{
	position : absolute;
}

#mv h1{
	background-color : #fff;
	color : #000;
	letter-spacing : .1em;
	font-weight : 700;
	display : grid;
	place-items : center end;
}

#mv p{
	color : rgba(255,255,255,.5);
	letter-spacing : .1em;
}

#mv .square01{
	background-color : var(--blue);
}

#mv .square02{
	background-color : var(--green);
}

#mv .border01 , #mv .border02{
	border-style : solid;
	background-color : transparent;
}

#mv .border01{
	border-color : var(--blue);
}

#mv .border02{
	border-color : var(--green);
}

@media screen and (max-width: 750px){
	#mv{
		height : calc( 829 * 100vw / 750 );
	}
	#mv h1{
		z-index : 2;
		height : calc( 94 * 100vw / 750 );
		left : calc( 0 * 100% / 750 );
		top : calc( 265 * 100vw / 750 );
		width : calc( 654 * 100% / 750 );
	}
	#mv h1{
		font-size : 2.4rem;
		line-height : calc( 32 / 24 );
	}
	#mv h1{
		padding-right : calc( 36 * 100% / 750 );
	}
	#mv p{
		width : 100%;
		text-align : right;
		z-index : 3;
		font-size : 10rem;
		top : calc( 367 * 100vw / 750 );
	}
	#mv .img01{
		z-index : 1;
		left : calc( 52 * 100% / 750 );
		top : 0;
	}
	#mv .img01 img{
		height : calc( 645 * 100vw / 750 );
	}
	#mv .img02{
		z-index : 2;
		left : calc( -20 * 100% / 750 );
		top : calc( 588 * 100vw / 750 );
	}
	#mv .img02 img{
		height : calc( 199 * 100vw / 750 );
	}
	#mv .img03{
		z-index : 3;
		left : calc( 265 * 100% / 750 );
		bottom : 0;
	}
	#mv .img03 img{
		height : calc( 155 * 100vw / 750 );
	}
	#mv .square01{
		width : calc( 220 * 100% / 750 );
		height : calc( 316 * 100vw / 750 );
		top : calc( 20 * 100vw / 750 );
		left : calc( -10 * 100% / 750 );
	}
	#mv .square02{
		z-index : 2;
		width : calc( 150 * 100% / 750 );
		height : calc( 150 * 100vw / 750 );
		top : calc( 554 * 100vw / 750 );
		left : calc( 612 * 100% / 750 );
	}
	#mv .border01 , #mv .border02{
		width : calc( 80 * 100% / 750 );
		height : calc( 80 * 100vw / 750 );
		border-width : calc( 6 * 100vw / 750 );
	}
	#mv .border01{
		z-index : 3;
		top : calc( 677 * 100vw / 750 );
		left : calc( 559 * 100% / 750 );
	}
	#mv .border02{
		z-index : 4;
		top : calc( 732 * 100vw / 750 );
		left : calc( 612 * 100% / 750 );
	}
	#mv .stripe{
		top : calc( 385 * 100vw / 750 );
		left : 0;
	}
	#mv .stripe img{
		height : calc( 419 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#mv{
		height : 748px;
	}
	#mv h1{
		z-index : 5;
		height : 94px;
		left : calc( 0 - 1100px );
		top : 329px;
		width : 1000px;
	}
	#mv h1{
		font-size : 3rem;
		line-height : calc( 32 / 24 );
	}
	#mv h1{
		padding-right : 20px;
	}
	#mv p{
		font-size : 8rem;
		z-index : 3;
		left : calc( 50% - 190px );
		top : 590px;
	}
	#mv .img01{
		z-index : 2;
		left : calc( 50% - 233px );
		top : 20px;
	}
	#mv .img01 img{
		height : 645px;
        width: calc( 100vw - 233px );
        object-fit: cover;
        object-position: 0 100%;
	}
	#mv .img02{
		z-index : 1;
		left : calc( 50% - 812px );
		top : 120px;
	}
	#mv .img02 img{
		height : 199px;
	}
	#mv .img03{
		z-index : 3;
		left : calc( 50% - 502px );
		top : 532px;
	}
	#mv .img03 img{
		height : 188px;
	}
	#mv .img04{
		z-index : 2;
		left : calc( 50% - 1000px );
		bottom : 0;
	}
	#mv .img04 img{
		height : 325px;
	}
	#mv .square01{
		width : 220px;
		height : 220px;
		top : 14px;
		left : calc( 50% - 1005px );
	}
	#mv .square02{
		z-index : 1;
		width : 230px;
		height : 230px;
		top : 200px;
		left : calc( 50% - 447px );
	}
	#mv .border01 , #mv .border02{
		width : 80px;
		height : 80px;
		border-width : 6px;
	}
	#mv .border01{
		z-index : 1;
		top : 84px;
		left : calc( 50% - 322px );
	}
	#mv .border02{
		z-index : 2;
		top : 27px;
		left : calc( 50% - 379px );
	}
	#mv .stripe{
		top : 45px;
	}
	#mv .stripe img{
		height : 419px;
	}
}

/*--------------------------------------------
OUTLINE
---------------------------------------------*/

#outline{
	position : relative;
	overflow : hidden;
}
#outline ul {
    display: flex;
}
#outline li{
	border-style : solid;
	border-color : #fff;
}

#outline li a{
	background-repeat : no-repeat;
	background-size : cover;
	background-position : 0 0;
	width : 100%;
	height : 100%;
	position : relative;
	color : #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    padding-top: 0px !important;
}

#outline h3 > span{
	display : block;
	text-align : center;
    line-height: 1.3;
}


#outline h3 > span:nth-of-type(2){
	display : grid;
	place-items : center;
	font-weight : 500;
}

#outline .box{
	position : relative;
}

#outline li p{
	position : absolute;
	left : 50%;
	translate : -50% 0;
	display : grid;
	place-items : center;
	background-color : #ae5da1;
	white-space : nowrap;
	text-align : center;
}

#outline li p.green{
	background-color : #2b922b;
}

#outline li p.pink{
	background-color : #eb6877;
}
.title03.tax{
    border-color: var(--blue);
}
.title03.audit{
    border-color: var(--green);
}
#outline .title03{
    margin-bottom: .5em;
}
#outline ul {
    margin-bottom: 1em;
}
#outline ul li .tax {
    background-color : rgba(58,133,190,.8);
}

#outline ul li .audit{
	background-color : rgba(141,189,92,.8);
}

@media screen and (max-width: 750px){
	#outline{
		padding-top : calc( 74 * 100vw / 750 );
		padding-bottom : calc( 38 * 100vw / 750 );
		overflow : hidden;
	}
	#outline h2 , #outline .text01{
		width : calc( 690 * 100% / 750 );
		margin-left : auto;
		margin-right : auto;
	}
	#outline .text01{
		margin-top : calc( ( 25 - var(--text01gap) ) * 100vw / 750 );
	}
	#outline .link01{
		margin-top : calc( ( 34 - var(--text01gap) ) * 100vw / 750 );
		width : calc( 400 * 100% / 750 );
	}
	#outline .box{
		margin-top : calc( 40 * 100vw / 750 );
	}
	#outline li{
		padding-bottom : calc( 13 * 100vw / 750 );
	}
	#outline li{
		width : calc( 260 * 100% / 750 );
		height : calc( 156 * 100vw / 750 );
		border-width : calc( 4 * 100vw / 750 );
	}
	#outline li a{
		background-image : url("../images/ui/bg/stripe_sp.webp");
		padding-top : calc( 31 * 100vw / 750 );
	}
	#outline h3 > span:nth-of-type(1){
		font-size : 2rem;
	}
	#outline h3 > span:nth-of-type(2){
		font-size : 2.4rem;
		line-height : 1.2;
	}
	#outline h3 > span:nth-of-type(2){
		margin-top : calc( ( 11 - 2.4 ) * 100vw / 750 );
		min-height : calc( 57.6 * 100vw / 750 );
	}
	#outline li p{
		padding-left : calc( 13 * 100vw / 750 );
		padding-right : calc( 13 * 100vw / 750 );
		padding-top : calc( ( 5 - 1.6 ) * 100vw / 750 );
		padding-bottom : calc( ( 5 - 1.6 ) * 100vw / 750 );
		font-size : 1.6rem;
		line-height : 1.2;
		bottom : calc( -9 * 100vw / 750 );
		text-align : center;
	}
	#outline .swiper-prev , #outline .swiper-next{
		top : calc( 40 * 100vw / 750 );
	}
	#outline .swiper-prev{
		left : 0;
	}
	#outline .swiper-next{
		right : 0;
	}
}

@media print,screen and (min-width: 751px){
	#outline{
		margin-top : -14px;
		padding-bottom : 67px;
		padding-top : 90px;
        margin-bottom: 50px;
	}
	#outline:before{
		content : "";
		display : block;
		position : absolute;
		top : 0;
		left : calc( 50% + 30px );
		top : 0;
		background : url("../images/home/outline/bg.webp") 0 0 / contain no-repeat;
		width : 650px;
		height : 581px;
	}
	#outline h2 , #outline .text01{
		width : 570px;
		margin-left : 10px;
	}
	#outline .text01{
		margin-top : calc( 20px - var(--text01gap) );
	}
	#outline .link01{
		margin-top : calc( 34px - var(--text01gap) );
		margin-left : 10px;
	}
	#outline .box{
		width : 1200px;
		padding-left : 20px;
		padding-right : 20px;
		left : -20px;
		margin-top : 44px;
	}
	#outline li{
		padding-bottom : 12px;
	}
	#outline li{
		width : 200px;
		height : 120px;
		border-width : 4px;
	}
	#outline li a{
		background-image : url("../images/ui/bg/stripe_pc.webp");
        display: flex;
        align-items: center;
        justify-content: center;
	}

	#outline h3 > span{
		font-size : 1.8rem;
		line-height : 1.2;
	}
	#outline h3 > span:nth-of-type(2){
		margin-top : calc( 13px - 1.8px );
		min-height : 43.2px;
	}
	#outline li p{
		padding-left : 20px;
		padding-right : 20px;
		padding-top : calc( 6.5px - 1.1px );
		padding-bottom : calc( 6.5px - 1.1px );
	}
	#outline li p{
		font-size : 1.1rem;
		line-height : 1.2;
	}
	#outline li p{
		bottom : -11px;
	}
	#outline .swiper-prev , #outline .swiper-next{
		top : 40px;
	}
	#outline .swiper-prev{
		left : 0;
	}
	#outline .swiper-next{
		right : 0;
	}
}