@charset "UTF-8";

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

/*--------------------------------------------
HTML
---------------------------------------------*/

@media screen and (max-width: 999px){
	html{
		font-size : calc( 10 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	html{
		font-size : 10px;
	}
}

/*--------------------------------------------
BODY
---------------------------------------------*/

@media screen and (max-width: 999px){
	body{
		font-size : 2.4rem;
		min-height : 100vh;
	}
}

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

/*--------------------------------------------
PARTICLE
---------------------------------------------*/

@media screen and (max-width: 999px){
	#particle{
		display : none;
	}
}

@media print,screen and (min-width: 1000px){
	#particle{
		width : 100vw;
		height : 100vh;
		margin : 0 auto;
		position : fixed;
		top : 0;
		left : 0;
		z-index : -1;
	}
}

/*--------------------------------------------
WRAPPER
---------------------------------------------*/

.wrap{
	margin-left : auto;
	margin-right : auto;
}

@media screen and (max-width: 999px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.wrap{
		min-width : 1000px;
		max-width : 1440px;
	}
	.wrap.col08{
		width : calc( 1440px * 8 / 12 );
		min-width : inherit;
	}
}

@media screen and (max-width: 999px){
	.sp-wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

/*--------------------------------------------
GRID SYSTEM
---------------------------------------------*/

@media print,screen and (min-width: 1000px){
	.col-wrap{
		display : flex;
	}
	.col-wrap.center > *{
		margin-left : auto;
		margin-right : auto;
	}
	.col-wrap.align-center{
		align-items : center;
	}
	.col-wrap.right > *{
		margin-left : auto;
	}
	.col-wrap.reverse{
		flex-direction : row-reverse;
	}
	.col-wrap.flex-wrap{
		flex-wrap : wrap;
	}
	.col-wrap .col-1{
		width : calc( 1 / 12 * 100% );
	}
	.col-wrap .col-2{
		width : calc( 2 / 12 * 100% );
	}
	.col-wrap .col-3{
		width : calc( 3 / 12 * 100% );
	}
	.col-wrap .col-4{
		width : calc( 4 / 12 * 100% );
	}
	.col-wrap .col-5{
		width : calc( 5 / 12 * 100% );
	}
	.col-wrap .col-6{
		width : calc( 6 / 12 * 100% );
	}
	.col-wrap .col-7{
		width : calc( 7 / 12 * 100% );
	}
	.col-wrap .col-9{
		width : calc( 9 / 12 * 100% );
	}
	.col-wrap .col-10{
		width : calc( 10 / 12 * 100% );
	}
	.col-wrap .col-11{
		width : calc( 11 / 12 * 100% );
	}
	.col-wrap .col-8{
		width : calc( 8 / 12 * 100% );
	}
	.col-wrap .col-12{
		width : calc( 12 / 12 * 100% );
	}
	.offset-1{
		margin-left : calc( 1 / 12 * 100% );
	}
	.offset-2{
		margin-left : calc( 2 / 12 * 100% );
	}
	.offset-3{
		margin-left : calc( 3 / 12 * 100% );
	}
	.offset-4{
		margin-left : calc( 4 / 12 * 100% );
	}
	.offset-5{
		margin-left : calc( 5 / 12 * 100% );
	}
	.offset-6{
		margin-left : calc( 6 / 12 * 100% );
	}
	.offset-7{
		margin-left : calc( 7 / 12 * 100% );
	}
	.offset-8{
		margin-left : calc( 8 / 12 * 100% );
	}
	.offset-9{
		margin-left : calc( 9 / 12 * 100% );
	}
	.offset-10{
		margin-left : calc( 10 / 12 * 100% );
	}
	.offset-11{
		margin-left : calc( 11 / 12 * 100% );
	}
	.pl-15{
		padding-left : 15px;
	}
	.pl-30{
		padding-left : 30px;
	}
	.pl-35{
		padding-left : 35px;
	}
	.pl-45{
		padding-left : 45px;
	}
	.pl-50{
		padding-left : 50px;
	}
	.pl-60{
		padding-left : 60px;
	}
	.pl-70{
		padding-left : 70px;
	}
	.pl-80{
		padding-left : 80px;
	}
	.pr-10{
		padding-right : 10px;
	}
	.pr-15{
		padding-right : 15px;
	}
	.pr-25{
		padding-right : 25px;
	}
	.pr-30{
		padding-right : 30px;
	}
	.pr-40{
		padding-right : 40px;
	}
	.pr-45{
		padding-right : 45px;
	}
	.pr-50{
		padding-right : 50px;
	}
	.pr-60{
		padding-right : 60px;
	}
	.mr-15{
		margin-right : 15px;
	}
	.mr-30{
		margin-right : 30px;
	}
	.mr-60{
		margin-right : 60px;
	}
	.ml-15{
		margin-left : 15px;
	}
	.ml-30{
		margin-left : 30px;
	}
	.ml-60{
		margin-left : 60px;
	}
	.ml-80{
		margin-left : 60px;
	}
	.mr-30{
		margin-right : 30px;
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

#header{
	background-color : #fff;
}

@media screen and (max-width: 999px){
	#header .wrap{
		height : calc( 120 * 100vw / 768 );
	}
	#header .logo{
		height : 100%;
		display : inline-block;
		margin-top : calc( 23 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 81 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#header .wrap{
		height : 120px;
		padding-left : 30px;
		padding-right : 30px;
		display : flex;
		justify-content : space-between;
	}
	#header .logo{
		height : 100%;
		display : flex;
		align-items : center;
	}
	#header .logo img{
		height : 56px;
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 999px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
}

@media screen and (max-width: 999px){
	#menuBtn{
		width : calc( 100 * 100% / 768 );
		height : calc( 100 * 100vw / 768 );
		right : calc( 10 * 100% / 768 );
		top : calc( 10 * 100vw / 768 );
		padding-left : calc( 14 * 100% / 768 );
		padding-right : calc( 14 * 100% / 768 );
		padding-top : calc( 29 * 100vw / 768 );
		padding-bottom : calc( 29 * 100vw / 768 );
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
	#menuBtn{
		position : fixed;
		z-index : 12;
	}
	#menuBtn span span{
		background-color : #100454;
		height : calc( 6 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		width : calc( 60 * 100% / 72 );
		left : calc( 12 * 100% / 72 );
		top : calc( 18 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(4){
		width : calc( 40 * 100% / 72 );
		left : calc( 32 * 100% / 72 );
	}
}

@media screen and (max-width: 999px){
	body.is-open #menuBtn span span{
		background-color : #fff;
	}
}

/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 999px){
	#nav{
		position : fixed;
		transform : translateX( 0 );
		z-index : 11;
		transition : transform .5s ease-in;
		overflow-y : auto;
		max-height : 100vh;
		top : 0;
		left : 100%;
	}
	#nav .scroll{
		overflow-y : scroll;
	}
	body.is-open #nav{
		transform : translateX( -100% );
	}
	#nav{
		background-color : rgba(0,0,0,.8);
		width : 100%;
		min-height : 100vh;
		padding-left : calc( 100 * 100% / 768 );
	}
	#nav:before{
		content : "";
		display : block;
		position : absolute;
		top : 0;
		left : 0;
		width : calc( 100 * 100% / 768 );
		background-color : rgba(0,0,0,.8);
	}
	#nav .scroll{
		background-color : #100454;
		min-height : 100vh;
		padding-top : calc( 120 * 100vw / 768 );
		padding-bottom : calc( 120 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#nav{
		height : 100%;
	}
	#nav .scroll{
		padding-top : 20px;
		display : flex;
		flex-direction : column-reverse;
	}
}

/*--------------------------------------------
NAV LANGUAGE
---------------------------------------------*/

#navLang a{
	letter-spacing : .1em;
	display : block;
    font-style: italic;
}

@media screen and (max-width: 999px){
	#navLang{
		margin-top : calc( 85 * 100vw / 768 );
		display : flex;
		justify-content : center;
	}
	#navLang li{
		display : flex;
		font-size : 3.6rem;
		font-style : italic;
		font-weight : 700;
	}
	#navLang li + li:before{
		content : "  |  ";
		white-space : pre;
		color : #fff;
	}
	#navLang a{
		color : #fff;
		letter-spacing : .1em;
		padding-bottom : calc( 12 * 100vw / 768 );
		border-bottom-width : calc( 2 * 100vw / 768 );
		border-bottom-color : transparent;
		border-bottom-style : solid;
		display : block;
	}
	#navLang a.is-active{
		border-bottom-color : #fff;
	}
}

@media print,screen and (min-width: 1000px){
	#navLang{
		display : flex;
		align-items : center;
		justify-content : flex-end;
	}
	#navLang li{
		display : flex;
		align-items : center;
	}
	#navLang li:before , #navLang li:last-child:after{
		content : "／";
		color : #ccc;
		letter-spacing : 0;
		text-indent : 0;
	}
	#navLang a{
		text-indent : .1em;
		text-align : center;
		font-size : 16px;
		padding-left : .5em;
		padding-right : .5em;
		color : #ccc;
		transition : .3s ease-in;
	}
	#navLang a.is-active , #navLang a:hover{
		color : #333;
	}
}

/*--------------------------------------------
NAV GLOBAL
---------------------------------------------*/

#navGlobal a{
	font-weight : 700;
}

@media screen and (max-width: 999px){
	#navGlobal li + li{
		margin-top : calc( 60 * 100vw / 768 );
	}
	#navGlobal li + li.li-02{
		margin-top : calc( 120 * 100vw / 768 );
	}
	#navGlobal a{
		font-size : 4rem;
		letter-spacing : .1em;
		color : #fff;
		display : flex;
		align-items : center;
		padding-left : calc( 44 * 100% / 668 );
		padding-right : calc( 44 * 100% / 668 );
		font-style : italic;
	}
	#navGlobal a:before{
		content : "-";
	}
	#navGlobal div{
		display : none;
	}
}

@media print,screen and (min-width: 1000px){
	#navGlobal{
		margin-top : 34px;
		display : flex;
	}
	#navGlobal > li{
		display : flex;
		padding-bottom : 34px;
	}
	#navGlobal > li + li:before{
		content : "／";
		margin-left : 15px;
		margin-right : 15px;
		letter-spacing : 0;
		text-indent : 0;
	}
	#navGlobal > li > a{
		font-size : 16px;
		letter-spacing : .15em;
		text-indent : .15em;
		font-weight : 700;
		padding-bottom : 5px;
		border-bottom-style : solid;
		border-bottom-width : 2px;
		border-bottom-color : transparent;
		display : block;
        font-style: italic;
	}
	#navGlobal > li > a.is-current{
		border-bottom-color : #073190;
	}
	#navGlobal > li > a:only-child{
		transition : border-bottom-color .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : border-bottom-color;
	}
	#navGlobal > li > a:only-child.is-current , #navGlobal > li > a:only-child:hover{
		border-bottom-color : #073190;
	}
	#navGlobal .has-child{
		position : relative;
	}
	#navGlobal .has-child > a{
		position : relative;
	}
	#navGlobal .has-child > a:after{
		content : "";
		display : block;
		width : 0;
		height : 0;
		border-style : solid;
		border-width : 0 6px 11px 6px;
		border-color : transparent transparent #073090 transparent;
		position : absolute;
		top : 25px;
		left : 1.75em;
		opacity : 0;
		transition : opacity .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : opacity;
	}
	#navGlobal .has-child:hover div{
		max-height : 500px;
	}
	#navGlobal .has-child:hover > a:after{
		opacity : 1;
	}
	#navGlobal div{
		transition : max-height .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : max-height;
		max-height : 0;
		overflow : hidden;
		position : absolute;
		z-index : 1;
		top : 35px;
		right : 0;
		width : 320px;
		background-color : #062c81;
		padding-left : 20px;
		padding-right : 20px;
	}
	#navGlobal div a{
		color : #fff;
		padding-top : 7.5px;
		padding-bottom : 7.5px;
		letter-spacing : .1em;
		font-size : 1.6rem;
		display : flex;
		align-items : center;
		align-items : center;
		white-space : nowrap;
        font-style: italic;
	}
	#navGlobal div a:before{
		flex-shrink : 0;
		white-space : nowrap;
		width : 1em;
	}
	#navGlobal div > a{
		margin-top : calc( 20px - 7.5px );
		display : block;
		border-bottom : 1px solid #fff;
	}
	#navGlobal div > a:before{
		content : "» ";
	}
	#navGlobal div ul{
		padding-bottom : calc( 20px - 7.5px );
		margin-top : 7.5px;
	}
	#navGlobal div li a:before{
		content : "- ";
	}
}

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

#title{
	font-style : italic;
	background-repeat : no-repeat;
	background-size : cover;
	background-position : 0 0;
}

#title .wrap{
	display : flex;
	align-items : flex-end;
	height : 100%;
}

#title h1{
	line-height : 1.2;
	font-weight : 700;
	letter-spacing : .1em;
	color : #fff;
}

#title.child .wrap{
	flex-direction : column;
	align-items : flex-start;
	justify-content : flex-end;
}

#title.child p{
	letter-spacing : .1em;
	color : #fff;
	font-weight : 500;
	width : 100%;
	display : flex;
	align-items : flex-end;
}

#title.child p:after{
	content : "";
	display : block;
	background-color : #fff;
}

@media screen and (max-width: 999px){
	#title{
		background-image : url("../images/ui/bg/title_sp.jpg");
		height : calc( 250 * 100vw / 768 );
	}
	#title .wrap{
		padding-bottom : calc( ( 68 - 4 ) * 100vw / 768 );
	}
	#title h1{
		font-size : 4rem;
		padding-left : calc( 23 * 100% / 720 );
	}
	#title.child .wrap{
		padding-bottom : calc( ( 67 - 4 ) * 100vw / 768 );
	}
	#title.child p{
		font-size : 2.6rem;
		padding-left : calc( 23 * 100% / 720 );
	}
	#title.child p:after{
		margin-left : calc( 8 * 100% / 720 );
		height : calc( 2 * 100vw / 768 );
		width : calc( 150 * 100% / 720 );
	}
	#title.child h1{
		margin-top : calc( ( 29 - 4 - 2.6 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#title{
		background-image : url("../images/ui/bg/title_pc.jpg");
		height : 226px;
	}
	#title .wrap{
		padding-bottom : calc( 77px - 3px );
	}
	#title h1{
		font-size : 3rem;
		padding-left : 40px;
	}
	#title.child .wrap{
		padding-bottom : calc( 75px - 3px );
	}
	#title.child p{
		font-size : 2.2rem;
		line-height : 1.2;
		padding-left : 40px;
	}
	#title.child p:after{
		width : 204px;
		height : 1px;
		margin-left : 5px;
	}
	#title.child h1{
		margin-top : calc( 26px - 3px - 2.2px );
	}
}

/*--------------------------------------------
SIDEBAR
---------------------------------------------*/

@media print,screen and (min-width: 1000px){
	#sidebar h4{
		font-size : 3rem;
		font-style : italic;
		font-weight : 700;
		color : #100454;
	}
	#sidebar ul{
		margin-top : 16px;
	}
	#sidebar li{
		border-bottom : 1px solid #ccc;
	}
	#sidebar a{
		padding-top : calc( 25px - 1.8px );
		padding-bottom : calc( 25px - 1.8px );
		font-size : 1.8rem;
		line-height : 1.2;
		display : block;
		font-style : italic;
		font-weight : 500;
		padding-left : 6px;
		padding-right : 6px;
	}
	#sidebar ul + h4{
		margin-top : 91px;
	}
}

/*--------------------------------------------
PAGINATION
---------------------------------------------*/

#pagination{
	position : relative;
}

#pagination a{
	top : 0;
	color : #100454;
	font-style : italic;
	font-weight : 700;
	letter-spacing : .1em;
}

#pagination a + a:before{
	content : "　 | 　";
}

@media screen and (max-width: 999px){
	#pagination{
		margin-top : calc( 106 * 100vw / 768 );
		height : calc( 26 * 100vw / 768 );
		padding-left : calc( 246 * 100% / 720 );
	}
	#pagination a{
		font-size : 2.6rem;
	}
	#pagination a + a:before{
		left : -5em;
	}
}

@media print,screen and (min-width: 1000px){
	#pagination{
		margin-top : 60px;
		height : 20px;
		padding-left : calc( 394 * 100% / 930 );
	}
	#pagination a{
		font-size : 2rem;
	}
	#pagination a + a:before{
		left : -5em;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer{
	background-color : #edeaea;
}

#footer .copyright{
	line-height : 1.2;
	font-family : "Lato", sans-serif;
	font-style : italic;
	text-align : center;
	letter-spacing : .15em;
	text-indent : .15em;
}

@media screen and (max-width: 999px){
	#footer{
		position : relative;
	}
	#footer > a.bt-top{
		position : absolute;
		top : 0;
		right : calc( 24 * 100% / 768 );
		display : block;
	}
	#footer > a img{
		height : calc( 60 * 100vw / 768 );
	}
	#footer .wrap{
		padding-top : calc( 40 * 100vw / 768 );
		padding-bottom : calc( 40 * 100vw / 768 );
	}
	#footer .copyright{
		font-size : 2rem;
	}
	#footer .box{
		padding-left : calc( 24 * 100vw / 768 );
		padding-right : calc( 24 * 100vw / 768 );
	}
	#footer .box div{
		margin-top : calc( 12px );
        border-bottom: 1px solid #ccc;
        padding-bottom: calc( 48 * 100vw / 768 );
        margin-bottom:  calc( 48 * 100vw / 768 );
	}
	#footer .box p{
		line-height : 1.5;
		color : #666;
        margin-bottom: 5px;
		font-size : 2.4rem;

	}
	#footer .box a{
		color : #666;
        text-decoration: underline;
	}
	#footer dl{
		display : flex;
	}
	#footer dl > dd + dt{
        margin-left: 1em;
	}
	#footer dt , #footer dd{
		font-size : 2.4rem;
		line-height : 1.5;
		color : #666;
		letter-spacing : .15em;
	}
}

@media print,screen and (min-width: 1000px){
	#footer .wrap{
		padding-top : 50px;
		padding-bottom : 50px;
	}
	#footer ul{
		display : flex;
		justify-content : center;
	}
	#footer ul li{
		display : flex;
	}
	#footer ul li + li:before{
		content : "／";
		margin-left : 18px;
		margin-right : 18px;
	}
	#footer ul a{
		display : block;
		letter-spacing : .15em;
		font-size : 1.6rem;
	}
	#footer .box{
		margin-top : 65px;
		display : flex;
		justify-content : space-between;
		align-items : flex-start;
	}
	#footer .logo{
		display : flex;
		align-items : flex-start;
	}
	#footer .logo img{
		flex-shrink : 0;
		height : 60px;
		margin-right : 25px;
	}
	#footer .logo span{
		font-size : 1.6rem;
		letter-spacing : .15em;
		line-height : 1.2;
		margin-top : calc( 2px - 1.6px );
		color : #666;
		font-style : italic;
	}
	#footer .box{
		padding-left : 31px;
		padding-right : 31px;
	}
	#footer .box div{
		margin-top : calc( 12px - 4px );
		position : relative;
	}
	#footer .box p{
		font-size : 1.6rem;
		line-height : 1.5;
		letter-spacing : .15em;
		color : #666;
	}
	#footer .box a{
		color : #666;
	}
	#footer dl{
		display : flex;
		justify-content : flex-end;
		align-items : baseline;
	}
	#footer dl > dd + dt{
		margin-left : 24px;
	}
	#footer dt , #footer dd{
		font-size : 1.6rem;
		line-height : 1.5;
		color : #666;
		letter-spacing : .15em;
	}
	#footer .copyright{
		border-top : 1px solid #999;
		color : #666;
		margin-top : 41px;
		font-size : 1.6rem;
		padding-top : calc( 49px - 1.6px );
	}
}

/*--------------------------------------------
NAV sabnav
---------------------------------------------*/

.sabnav{
	font-style : italic;
}

.sabnav ul{
	display : flex;
	justify-content : center;
}

.sabnav ul li a{
	color : #333;
	text-decoration : none;
	font-weight : 400;
}

.sabnav ul li a.current{
	text-decoration : underline;
	color : #333;
}

@media screen and (max-width: 999px){
	.sabnav{
		padding-top : 2em;
		padding-bottom : 2em;
		font-size : calc(26 * 100vw / 768);
	}
	.sabnav ul{
		flex-wrap : wrap;
	}
	.sabnav ul li{
		padding : .5em;
	}
	#title + .sabnav{
		display : none;
	}
}

@media print,screen and (min-width: 1000px){
	.sabnav{
		padding-top : 2em;
		padding-bottom : 2em;
		font-size : 18px;
	}
	.sabnav ul li{
		padding : 0 1em;
	}
}