@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap");

:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
STATE
---------------------------------------------*/

@media screen and (max-width: 999px){
	.is-pc{
		display : none !important;
	}
}

@media print,screen and (min-width: 1000px){
	.is-sp{
		display : none !important;
	}
}
a:hover{
    opacity: .8;
}

/*--------------------------------------------
DATA TEXT
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}

[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}

[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}

[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}

@media screen and (max-width: 999px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

@media screen and (max-width: 999px){
	[data-sp-befpre]:befpre{
		content : attr( data-sp-before );
		white-space : pre;
	}
}

@media print,screen and (min-width: 1000px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
}

@media print,screen and (min-width: 1000px){
	[data-pc-befpre]:befpre{
		content : attr( data-pc-before );
		white-space : pre;
	}
}

/*--------------------------------------------
FONT
---------------------------------------------*/

.roboto{
	font-family : "Roboto", sans-serif;
}

.lato{
	font-family : "Lato", sans-serif;
}

/*--------------------------------------------
BACKGROUND COLOR
---------------------------------------------*/

.white01{
	background-color : rgba(255,255,255,1);
}

.white02{
	background-color : rgba(255,255,255,.7);
}

.gray01{
	background-color : rgba(216,216,216,.5);
}

.gray02{
	background-color : rgba(248,248,248,1.0);
}

.blue01{
	background-color : rgba(7,49,144,1);
	color : #fff;
}

.blue02{
	background-color : rgba(5,38,138,.7);
	color : #fff;
}

.bg{
	background-repeat : no-repeat;
}

@media screen and (max-width: 999px){
	.bg{
		background-image : url("../images/ui/bg/pattern01_sp.png");
		background-size : auto calc( 662 * 100vw / 768 );
		background-position : 0 calc( 28 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.bg{
		background-image : url("../images/ui/bg/pattern01_pc.png");
	}
}

@media screen and (min-width: 1000px) and (max-width:1439px){
	.bg{
		background-position : calc( 50% - ( 440 * 100% / 1440 ) ) calc( 127 * 100vw / 1440 );
		background-size : auto calc( 958 * 100vw / 1440 );
	}
}

@media print,screen and (min-width: 1440px){
	.bg{
		background-position : calc( 50vw - 720px ) 127px;
		background-size : auto 958px;
	}
}

.bg02{
	background-repeat : no-repeat;
}

@media screen and (max-width: 999px){
	.bg02{
		background-image : url("../images/ui/bg/pattern02_sp.png");
		background-size : auto calc( 439 * 100vw / 768 );
		background-position : calc( 25 * 100vw / 768 ) calc( 581 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.bg02{
		background-image : url("../images/ui/bg/pattern02_pc.png");
	}
}

@media screen and (min-width: 1000px) and (max-width:1439px){
	.bg02{
		background-position : 50vw calc( 115 * 100vw / 1440 );
		background-size : auto calc( 439 * 100vw / 1440 );
	}
}

@media print,screen and (min-width: 1440px){
	.bg02{
		background-position : 50vw 115px;
		background-size : auto 439px;
	}
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

.title01 span{
	font-style : italic;
	font-weight : 700;
	color : #100454;
}

.title01 span:nth-of-type(1){
	letter-spacing : .1em;
}

.title01 span:nth-of-type(2){
	letter-spacing : .02em;
	font-family : "Roboto", sans-serif;
	color : rgba(153,153,153,.2);
	position : absolute;
}

.title01 span:nth-of-type(2).right{
	text-align : right;
}

.title01.white span:nth-of-type(1){
	color : #fff;
}

.title01.white span:nth-of-type(2){
	color : rgba(0,0,0,.2);
}

@media screen and (max-width: 999px){
	.title01 span:nth-of-type(1){
		font-size : 4rem;
	}
	.title01 span:nth-of-type(1).line{
		line-height : 1.5;
	}
	.title01 span:nth-of-type(2){
		font-size : 9rem;
	}
}

@media print,screen and (min-width: 1000px){
	.title01 span:nth-of-type(1){
		font-size : 3rem;
	}
	.title01 span:nth-of-type(1).line{
		line-height : 1.5;
	}
	.title01 span:nth-of-type(2){
		font-size : 9rem;
	}
}

.title02{
	font-weight : 700;
	letter-spacing : .1em;
	color : #100454;
	font-style : italic;
}

@media screen and (max-width: 999px){
	.title02{
		font-size : 3.5rem;
		line-height : 1.5;
	}
	.title02 + .text01{
		margin-top : calc( ( 50 - 8.75 - 13 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.title02{
		font-size : 3rem;
		line-height : 1.5;
	}
	.title02 + .text01{
		margin-top : 20px;
	}
}

.title03{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	color : #05268a;
	font-weight : 700;
	font-style : italic;
}

@media screen and (max-width: 999px){
	.title03{
		font-size : 3.5rem;
		line-height : 1.5;
	}
}

@media print,screen and (min-width: 1000px){
	.title03{
		font-size : 4rem;
	}
}

.title04{
	font-weight : 700;
	font-style : italic;
	color : #05268a;
	letter-spacing : .1em;
	line-height : 1.2;
}

@media screen and (max-width: 999px){
	.title04{
		font-size : 3.4rem;
	}
	.title04 + .text01{
		margin-top : calc( 20 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.title04{
		font-size : 2.4rem;
	}
	.title04 + .text01{
		margin-top : calc( 31px - 2.4px - 9px );
	}
}

/*--------------------------------------------
LINK
---------------------------------------------*/

.link01{
	display : flex;
	align-items : baseline;
	justify-content : flex-end;
	font-style : italic;
	letter-spacing : .1em;
	font-weight : 700;
	color : #100454;
	color : var(--primary);
}

.link01:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
	font-size : 0;
	flex-shrink : 0;
}

.link01.white{
	color : #fff;
}

@media screen and (max-width: 999px){
	.link01{
		font-size : 2.6rem;
	}
	.link01:before{
		background-image : url("../images/ui/parts/arrow01_sp.png");
		width : calc( 73 * 100vw / 768 );
		height : calc( 13 * 100vw / 768 );
		margin-right : calc( 6 * 100vw / 768 );
	}
	.link01.white:before{
		background-image : url("../images/ui/parts/arrow01_white_sp.png");
	}
}

@media print,screen and (min-width: 1000px){
	.link01{
		font-size : 2rem;
        transition: all .3s;
	}
	.link01:hover{
        opacity: .6;
	}
	.link01:before{
		background-image : url("../images/ui/parts/arrow01_pc.png");
		width : 71px;
		height : 12px;
		margin-right : 6px;
	}

	.link01.white:before{
		background-image : url("../images/ui/parts/arrow01_white_pc.png");
	}
}
/*--------------------------------------------
FLEXBOX
---------------------------------------------*/

@media print,screen and (min-width: 1000px){
	.flex-end-center{
		display : flex;
		justify-content : flex-end;
		align-items : center;
	}
}

/*--------------------------------------------
TEXT
---------------------------------------------*/

.text-left{
	text-align : left;
}

.text-right{
	text-align : right;
}

.text-center{
	text-align : center;
}

em.red{
	font-weight : 700;
	color : #f00;
}

em.blue{
	color : #2e5fd1;
	font-weight : 700;
}

.text01{
	line-height : 2;
}

.text01.ls{
	letter-spacing : .1em;
}

.text01.ti1em{
	text-indent : 1em;
}

@media screen and (max-width: 999px){
	.text01{
		font-size : 2.6rem;
	}
	.text01 + .text01{
		margin-top : calc( 52 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.text01{
		font-size : 1.8rem;
	}
	.text01 + .text01{
		margin-top : 36px;
	}
}

.text02{
	font-weight : 700;
	font-style : italic;
	letter-spacing : .1em;
}

@media screen and (max-width: 999px){
	.text02{
		color : #100454;
		font-size : 3.5rem;
		line-height : 1.5;
	}
}

@media print,screen and (min-width: 1000px){
	.text02{
		font-size : 3rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 1000px){
	.text03{
		font-size : 1.6rem;
		line-height : 1.875;
	}
}

/*--------------------------------------------
IMG
---------------------------------------------*/

.width img{
	width : 100%;
	height : auto;
}

/*--------------------------------------------
OBJECT FIT
---------------------------------------------*/

@media print,screen and (min-width: 1000px){
	.ofj{
		overflow : hidden;
	}
	.ofj > img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		font-family : "object-fit: cover;";
	}
}

/*--------------------------------------------
table-container
---------------------------------------------*/

.table-container{
	overflow-y : auto;
	position : relative;
}

.table-container .ps__rail-x{
	background-color : #bfbfbf;
	opacity : 1;
}

.table-container .ps__thumb-x{
	background-color : #626262;
	bottom : 0;
	height : 100%;
}

.table-container table{
	table-layout : auto;
}

@media screen and (max-width: 999px){
	.table-container{
		padding-bottom : calc( 50 * 100vw / 768 );
	}
	.table-container .ps__rail-x{
		height : calc( 16 * 100vw / 768 );
		border-radius : calc( 8 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.table-container{
		padding-bottom : 20px;
        margin-bottom: 10px;
	}
	.table-container .ps__rail-x{
		height : 16px;
		border-radius : 8px;
	}
	.table-container .ps__thumb-x{
		border-radius : 8px;
	}
}